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

Merge pull request #240 from taigaio/us/1868/autoprefix 

remove includes & add gulp-autoprefix
stable
Xaviju 2015-01-13 13:18:11 +01:00
parent de1993eafc bb7543d954
commit 8513c0d0d0
65 changed files with 364 additions and 362 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/styles/components/buttons.scss
View File

@ -5,8 +5,8 @@
text-transform: uppercase; text-transform: uppercase;
&:hover, &:hover,
&.active { &.active {
@include transition (color .3s linear);
color: $green-taiga; color: $green-taiga;
transition: color .3s linear;
} }
.icon { .icon {
margin-right: .3rem; margin-right: .3rem;
@ -98,8 +98,8 @@ a.button-bulk {
margin-right: 0; margin-right: 0;
} }
&:hover { &:hover {
@include transition (background .3s linear);
background: $fresh-taiga; background: $fresh-taiga;
transition: background .3s linear;
} }
} }
.button-github { .button-github {
@ -113,7 +113,7 @@ a.button-bulk {
vertical-align: text-bottom; vertical-align: text-bottom;
} }
&:hover { &:hover {
@include transition (background .3s linear);
background: $black; background: $black;
transition: background .3s linear;
} }
} }

8
app/styles/components/filter.scss
View File

@ -9,15 +9,15 @@
opacity: .5; opacity: .5;
position: relative; position: relative;
&:hover { &:hover {
@include transition (opacity .2s linear);
color: $grayer; color: $grayer;
opacity: 1; opacity: 1;
transition: opacity .2s linear;
} }
&.selected, &.selected,
&.active { &.active {
@include transition (opacity .2s linear);
color: $grayer; color: $grayer;
opacity: 1; opacity: 1;
transition: opacity .2s linear;
} }
.name, .name,
.number { .number {
@ -35,14 +35,14 @@
top: 0; top: 0;
} }
.icon-delete { .icon-delete {
@include transition(color .3s linear);
color: $grayer; color: $grayer;
position: absolute; position: absolute;
right: .5rem; right: .5rem;
top: .5rem; top: .5rem;
transition: color .3s linear;
&:hover { &:hover {
@include transition(color .3s linear);
color: $red; color: $red;
transition: color .3s linear;
} }
} }
} }

4
app/styles/components/help-notion-button.scss
View File

@ -1,11 +1,11 @@
a.help { a.help {
@include transition(color .2s linear);
color: $gray-light; color: $gray-light;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: 1rem; top: 1rem;
transition: color .2s linear;
&:hover { &:hover {
@include transition(color .2s linear);
color: $green-taiga; color: $green-taiga;
transition: color .2s linear;
} }
} }

12
app/styles/components/kanban-task.scss
View File

@ -9,13 +9,13 @@
&:hover { &:hover {
.icon-edit, .icon-edit,
.icon-drag-h { .icon-drag-h {
@include transition(opacity .2s linear);
opacity: 1; opacity: 1;
transition: opacity .2s linear;
} }
} }
&.ui-sortable-helper { &.ui-sortable-helper {
@include transition(box-shadow .3s linear);
box-shadow: 1px 1px 15px rgba($black, .4); box-shadow: 1px 1px 15px rgba($black, .4);
transition: box-shadow .3s linear;
} }
&.blocked { &.blocked {
background: $red; background: $red;
@ -47,8 +47,8 @@
img { img {
margin: 0 auto; margin: 0 auto;
&:hover { &:hover {
@include transition(border .3s linear);
border: 2px solid $green-taiga; border: 2px solid $green-taiga;
transition: border .3s linear;
} }
} }
.assigned-to { .assigned-to {
@ -83,13 +83,13 @@
.icon-edit, .icon-edit,
.icon-drag-h { .icon-drag-h {
@extend %large; @extend %large;
@include transition(opacity .2s linear);
color: $postit-hover; color: $postit-hover;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
transition: opacity .2s linear;
&:hover { &:hover {
@include transition(color .3s linear);
color: darken($postit-hover, 15%); color: darken($postit-hover, 15%);
transition: color .3s linear;
} }
} }
} }
@ -160,9 +160,9 @@
} }
.icon-drag-h { .icon-drag-h {
@extend %medium; @extend %medium;
@include transform(rotate(90deg));
cursor: move; cursor: move;
right: .1rem; right: .1rem;
transform: rotate(90deg);
} }
.kanban-tag { .kanban-tag {
border-top: .2rem solid; border-top: .2rem solid;

6
app/styles/components/loader.scss
View File

@ -11,10 +11,10 @@
width: 100%; width: 100%;
z-index: -100; z-index: -100;
.container { .container {
@include display(flex); align-items: center;
@include align-items(center); display: flex;
@include justify-content(center);
height: 100%; height: 100%;
justify-content: center;
width: 100%; width: 100%;
} }
p { p {

20
app/styles/components/loading-bar.scss
View File

@ -1,15 +1,15 @@
.loading { .loading {
@include display(flex); align-items: stretch;
@include align-items(stretch); display: flex;
@include flex-direction(row); flex-direction: row;
@include justify-content(flex-start); justify-content: flex-start;
.item { .item {
@include animation-duration(5s); animation-duration: 5s;
@include animation-iteration-count(infinite); animation-iteration-count: infinite;
@include animation-name(loadBar); animation-name: loadBar;
@include animation-timing-function(ease-in); animation-timing-function: ease-in;
@include flex(1);
background: $gray; background: $gray;
flex: 1;
height: 5px; height: 5px;
} }
@ -17,7 +17,7 @@
@each $current-color in $colors-list { @each $current-color in $colors-list {
$i: index($colors-list, $current-color) - 1; $i: index($colors-list, $current-color) - 1;
.item-#{$i} { .item-#{$i} {
@include animation-delay(#{$i}s); animation-delay: #{$i}s;
background: $current-color; background: $current-color;
} }
} }

4
app/styles/components/markdown-help.scss
View File

@ -4,12 +4,12 @@ a.help-button {
color: $gray-light; color: $gray-light;
&:hover { &:hover {
span { span {
@include transition(color .2s linear);
color: $grayer; color: $grayer;
transition: color .2s linear;
} }
.icon { .icon {
@include transition(color .2s linear);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .2s linear;
} }
} }
.icon { .icon {

2
app/styles/components/markitup.scss
View File

@ -8,8 +8,8 @@
a { a {
opacity: .8; opacity: .8;
&:hover { &:hover {
@include transition(opacity .2s linear);
opacity: .3; opacity: .3;
transition: opacity .2s linear;
} }
} }
} }

16
app/styles/components/notification-message.scss
View File

@ -1,20 +1,20 @@
.notification-message { .notification-message {
@include transform(translateY(-100%));
background: rgba($gray-light, .95); background: rgba($gray-light, .95);
color: $white; color: $white;
opacity: 0; opacity: 0;
padding: 1rem; padding: 1rem;
position: fixed; position: fixed;
top: 0; top: 0;
transform: translateY(-100%);
width: 100%; width: 100%;
z-index: 99920; z-index: 99920;
&.inactive { &.inactive {
@include transition (all .6s ease-in-out); transition: all .6s ease-in-out;
} }
&.active { &.active {
@include transform(translateY(0));
@include transition (all .6s ease-in-out);
opacity: 1; opacity: 1;
transform: translateY(0);
transition: all .6s ease-in-out;
} }
.text { .text {
display: inline-block; display: inline-block;
@ -57,21 +57,21 @@
} }
.notification-light { .notification-light {
@include transform(translateY(-100%));
background: rgba($gray-light, .95); background: rgba($gray-light, .95);
color: $white; color: $white;
left: calc(50% - 200px); left: calc(50% - 200px);
padding: 1rem 1rem .2rem; padding: 1rem 1rem .2rem;
position: absolute; position: absolute;
top: 0; top: 0;
transform: translateY(-100%);
width: 400px; width: 400px;
z-index: 99999; z-index: 99999;
&.inactive { &.inactive {
@include transition (all .6s ease-in-out); transition: all .6s ease-in-out;
} }
&.active { &.active {
@include transform(translateY(0)); transform: translateY(0);
@include transition (all .6s ease-in-out); transition: all .6s ease-in-out;
} }
.text { .text {
display: inline-block; display: inline-block;

6
app/styles/components/paginator.scss
View File

@ -9,17 +9,17 @@
a, a,
.active span, .active span,
.dots { .dots {
@include transition (all .3s linear);
background: $gray-light; background: $gray-light;
color: $white; color: $white;
margin-right: .1rem; margin-right: .1rem;
padding: .5rem 1rem; padding: .5rem 1rem;
transition: all .3s linear;
} }
a { a {
&:hover { &:hover {
@include transition (all .3s linear);
background: $button-gray-hover; background: $button-gray-hover;
color: $white; color: $white;
transition: all .3s linear;
} }
} }
.active { .active {
@ -47,7 +47,7 @@ a.v-pagination-previous {
visibility: hidden; visibility: hidden;
width: 100%; width: 100%;
&:hover { &:hover {
@include transition (background .3s linear);
background-color: $button-gray / 2; background-color: $button-gray / 2;
transition: background .3s linear;
} }
} }

6
app/styles/components/summary.scss
View File

@ -91,18 +91,18 @@
@extend %xlarge; @extend %xlarge;
margin-right: .4rem; margin-right: .4rem;
&.icon-stats { &.icon-stats {
@include transition(color .3s linear);
color: $gray; color: $gray;
float: right; float: right;
transition: color .3s linear;
&:hover { &:hover {
@include transition(color .3s linear);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .3s linear;
} }
&.active { &.active {
color: $fresh-taiga; color: $fresh-taiga;
&:hover { &:hover {
@include transition(color .3s linear);
color: $gray; color: $gray;
transition: color .3s linear;
} }
} }
} }

10
app/styles/components/taskboard-task.scss
View File

@ -9,15 +9,15 @@
&:hover { &:hover {
.icon-edit, .icon-edit,
.icon-drag-h { .icon-drag-h {
@include transition(color .3s linear, opacity .3s linear);
color: $postit-dark-hover; color: $postit-dark-hover;
display: block; display: block;
opacity: 1; opacity: 1;
transition: color .3s linear, opacity .3s linear;
} }
} }
&.ui-sortable-helper { &.ui-sortable-helper {
@include transition(box-shadow .3s linear);
box-shadow: 1px 1px 15px rgba($black, .4); box-shadow: 1px 1px 15px rgba($black, .4);
transition: box-shadow .3s linear;
} }
&.ui-sortable-placeholder { &.ui-sortable-placeholder {
background: $grayer; background: $grayer;
@ -57,8 +57,8 @@
img { img {
margin: 0 auto; margin: 0 auto;
&:hover { &:hover {
@include transition(border .3s linear);
border: 2px solid $green-taiga; border: 2px solid $green-taiga;
transition: border .3s linear;
} }
} }
figcaption { figcaption {
@ -73,7 +73,7 @@
} }
&.iocaine { &.iocaine {
img { img {
@include filter(hue-rotate(150deg) saturate(200%)); filter: hue-rotate(150deg) saturate(200%);
} }
} }
} }
@ -106,7 +106,7 @@
word-wrap: break-word; word-wrap: break-word;
} }
.icon { .icon {
@include transition(color .3s linear, opacity .3s linear); transition: color .3s linear, opacity .3s linear;
} }
.icon-edit, .icon-edit,
.icon-drag-h { .icon-drag-h {

6
app/styles/components/watchers.scss
View File

@ -29,8 +29,8 @@
} }
&:hover { &:hover {
.icon-delete { .icon-delete {
@include transition(opacity .2s ease-in);
opacity: 1; opacity: 1;
transition: opacity .2s ease-in;
} }
} }
} }
@ -45,14 +45,14 @@
@include table-flex-child(1, 0); @include table-flex-child(1, 0);
} }
.icon-delete { .icon-delete {
@include transition(all .2s ease-in);
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: .5rem; right: .5rem;
top: 0; top: 0;
transition: all .2s ease-in;
&:hover { &:hover {
@include transition(color .3s ease-in);
color: $red; color: $red;
transition: color .3s ease-in;
} }
} }
} }

12
app/styles/dependencies/helpers.scss
View File

@ -49,12 +49,12 @@
} }
&.open { &.open {
@include table-flex(center, center, flex, row, wrap, center); @include table-flex(center, center, flex, row, wrap, center);
@include transition (opacity .3s ease);
opacity: 1; opacity: 1;
transition: opacity .3s ease;
} }
&.close { &.close {
@include transition (opacity .3s ease);
opacity: 0; opacity: 0;
transition: opacity .3s ease;
} }
.title { .title {
text-align: center; text-align: center;
@ -78,17 +78,17 @@
%button { %button {
@extend %medium; @extend %medium;
@extend %title; @extend %title;
@include transition (background .3s linear);
display: inline-block; display: inline-block;
padding: 7px 40px 6px; padding: 7px 40px 6px;
transition: background .3s linear;
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
@include transition (background .3s linear); transition: background .3s linear;
} }
&.loading { &.loading {
span { span {
@include animation (loading .5s linear); animation: loading .5s linear;
@include animation (spin 1s linear infinite); animation: spin 1s linear infinite;
} }
} }
.icon { .icon {

26
app/styles/dependencies/mixins.scss
View File

@ -7,18 +7,18 @@
// Table Flex - http://devbryce.com/site/flexbox/ // Table Flex - http://devbryce.com/site/flexbox/
@mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) { @mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
@include display($display); align-content: $align-content; //flex-start | flex-end | center | space-between | space-around | stretch
@include align-content($align-content); //flex-start | flex-end | center | space-between | space-around | stretch align-items: $align-items; //flex-start | flex-end | center | baseline | stretch
@include align-items($align-items); //flex-start | flex-end | center | baseline | stretch display: $display;
@include flex-direction($flex-direction); //row | row-reverse | column | column-reverse flex-direction: $flex-direction; //row | row-reverse | column | column-reverse
@include flex-wrap($flex-wrap); //nowrap | wrap | wrap-reverse flex-wrap: $flex-wrap; //nowrap | wrap | wrap-reverse
@include justify-content($justify-content); //flex-start | flex-end | center | space-between | space-around justify-content: $justify-content; //flex-start | flex-end | center | space-between | space-around
} }
@mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') { @mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {
@include flex($flex-grow); flex: $flex-grow;
@include flex-basis($flex-basis); flex-basis: $flex-basis;
@include flex-shrink($flex-shrink); flex-shrink: $flex-shrink;
width: $flex-basis; width: $flex-basis;
@if #{$width} != null { @if #{$width} != null {
width: #{$width}; width: #{$width};
@ -38,11 +38,11 @@
} }
@mixin slide($max, $overflow, $min: 0) { @mixin slide($max, $overflow, $min: 0) {
@include transition(max-height .5s ease-in);
max-height: $min; max-height: $min;
transition: max-height .5s ease-in;
#{$overflow}: hidden; #{$overflow}: hidden;
&.open { &.open {
@include transition(max-height .5s ease-in); transition: max-height .5s ease-in;
max-height: $max; max-height: $max;
} }
} }
@ -77,11 +77,10 @@
} }
&:hover { &:hover {
color: $fresh-taiga; color: $fresh-taiga;
@include transition (color .3s linear); transition: color .3s linear;
} }
} }
&:after { &:after {
@include transform(rotate(45deg));
background: $blackish; background: $blackish;
bottom: #{$arrow-bottom}; bottom: #{$arrow-bottom};
content: ''; content: '';
@ -89,6 +88,7 @@
left: #{$arrow-left}; left: #{$arrow-left};
position: absolute; position: absolute;
top: #{$arrow-top}; top: #{$arrow-top};
transform: rotate(45deg);
width: #{$arrow-width}; width: #{$arrow-width};
} }
} }

18
app/styles/layout/animation.scss
View File

@ -1,39 +1,39 @@
//Loading //Loading
@include keyframes(loading) { @include keyframes(loading) {
0% { 0% {
@include filter(blur(5px)); filter: blur(5px);
opacity: 0; opacity: 0;
} }
100% { 100% {
@include filter(blur(0)); filter: blur(0);
opacity: 1; opacity: 1;
} }
} }
@include keyframes(formSlide) { @include keyframes(formSlide) {
0% { 0% {
@include filter(blur(5px)); filter: blur(5px);
@include transform(translateY(10rem));
opacity: 0; opacity: 0;
transform: translateY(10rem);
} }
50% { 50% {
@include filter(blur(0)); filter: blur(0);
} }
100% { 100% {
@include transform(translateY(0));
opacity: 1; opacity: 1;
transform: translateY(0);
} }
} }
//Bar loading //Bar loading
@include keyframes(loadBar) { @include keyframes(loadBar) {
0% { 0% {
@include flex(1); flex: 1;
} }
10% { 10% {
@include flex(10); flex: 10;
} }
20% { 20% {
@include flex(1); flex: 1;
} }
} }

74
app/styles/layout/base.scss
View File

@ -13,63 +13,63 @@ body {
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
width: 100%; width: 100%;
.master { .master {
@include transition (transform 1s ease); transition: transform 1s ease;
&.ng-animate { &.ng-animate {
@include transition(); transition: 0;
} }
} }
.menu { .menu {
@include transform(translate3d(0, 0, 0)); transform: translate3d(0, 0, 0);
@include transition (transform 1s ease); transition: transform 1s ease;
} }
&.open-projects-nav { &.open-projects-nav {
.projects-nav { .projects-nav {
@include transform(translate3d(0, 0, 0)); transform: translate3d(0, 0, 0);
@include transition (transform 1s ease); transition: transform 1s ease;
} }
.master { .master {
@include transform(translate3d(300px, 0, 0)); transform: translate3d(300px, 0, 0);
@include transition (transform 1s ease); transition: transform 1s ease;
&.ng-animate { &.ng-animate {
@include transition(); transition: 0;
} }
} }
.menu { .menu {
@include transform(translate3d(300px, 0, 0)); transform: translate3d(300px, 0, 0);
@include transition (transform 1s ease); transition: transform 1s ease;
} }
.projects-nav-overlay { .projects-nav-overlay {
@include transform(translate3d(300px, 0, 0));
@include transition (all 1s ease);
opacity: .9; opacity: .9;
transform: translate3d(300px, 0, 0);
transition: all 1s ease;
} }
&.closed-projects-nav { &.closed-projects-nav {
.projects-nav { .projects-nav {
@include transform(translate3d(-300px, 0, 0)); transform: translate3d(-300px, 0, 0);
@include transition (transform 1s ease); transition: transform 1s ease;
} }
.projects-nav-overlay { .projects-nav-overlay {
@include transition (all 1s ease);
@include transform(translate3d(0, 0, 0));
opacity: 0; opacity: 0;
transform: translate3d(0, 0, 0);
transition: all 1s ease;
} }
.master { .master {
@include transform(translate3d(0, 0, 0)); transform: translate3d(0, 0, 0);
} }
.menu { .menu {
@include transform(translate3d(0, 0, 0)); transform: translate3d(0, 0, 0);
} }
} }
} }
&.loading-project { &.loading-project {
overflow: hidden; overflow: hidden;
.projects-nav-overlay { .projects-nav-overlay {
@include transition (opacity 1s ease);
opacity: 1; opacity: 1;
overflow: hidden; overflow: hidden;
transition: opacity 1s ease;
div { div {
@include transition (opacity 1s ease);
opacity: 1; opacity: 1;
transition: opacity 1s ease;
} }
} }
} }
@ -87,38 +87,38 @@ body {
} }
.wrapper { .wrapper {
@include display(flex); display: flex;
min-height: 100vh; min-height: 100vh;
padding-left: 90px; padding-left: 90px;
} }
.menu-secondary { .menu-secondary {
@include flex(1);
background: $whitish; background: $whitish;
flex: 1;
min-width: 0; min-width: 0;
padding: 2rem 1rem; padding: 2rem 1rem;
width: 260px; width: 260px;
&.filters-bar { &.filters-bar {
@include flex(0); flex: 0;
@include transition(all .2s linear);
padding: 0; padding: 0;
transition: all .2s linear;
width: 0; width: 0;
&.active { &.active {
@include flex(1); flex: 1;
@include transition(all .2s linear);
padding: 2em 1em; padding: 2em 1em;
transition: all .2s linear;
width: 210px; width: 210px;
.filters-inner { .filters-inner {
@include transition (all .4s ease-in);
opacity: 1; opacity: 1;
transition: all .4s ease-in;
} }
} }
} }
} }
.menu-tertiary { .menu-tertiary {
@include flex(1);
background-color: $dark-grayish-lime-green; background-color: $dark-grayish-lime-green;
flex: 1;
padding: 2em 1em; padding: 2em 1em;
} }
@ -127,10 +127,10 @@ body {
} }
.main { .main {
@include flex(4); flex: 4;
min-width: 600px;
padding: 2rem; padding: 2rem;
padding-bottom: 1rem; padding-bottom: 1rem;
min-width: 600px;
} }
.icon { .icon {
@ -142,14 +142,14 @@ body {
} }
.header-with-actions { .header-with-actions {
@include display(flex); align-content: stretch;
@include align-content(stretch); align-items: center;
@include align-items(center); display: flex;
@include flex-wrap(wrap); flex-wrap: wrap;
@include justify-content(space-between); justify-content: space-between;
margin-bottom: 1rem; margin-bottom: 1rem;
.action-buttons { .action-buttons {
@include flex-shrink(0); flex-shrink: 0;
} }
.button { .button {
color: $white; color: $white;

2
app/styles/layout/elements.scss
View File

@ -40,7 +40,7 @@ sup {
} }
.icon-spinner { .icon-spinner {
@include animation (spin 1s linear infinite); animation: spin 1s linear infinite;
} }
.clickable { .clickable {

6
app/styles/layout/invitation.scss
View File

@ -57,21 +57,21 @@
} }
input:focus { input:focus {
+.forgot-pass { +.forgot-pass {
@include transition(opacity .5s linear);
opacity: 0; opacity: 0;
transition: opacity .5s linear;
} }
} }
.forgot-pass { .forgot-pass {
@extend %small; @extend %small;
@include transition(all .3s linear);
color: $gray-light; color: $gray-light;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: .5rem; top: .5rem;
transition: all .3s linear;
&:hover { &:hover {
@include transition(color .3s linear);
color: $grayer; color: $grayer;
transition: color .3s linear;
} }
} }
.button { .button {

2
app/styles/layout/issues.scss
View File

@ -1,6 +1,6 @@
.issues { .issues {
.filters-bar { .filters-bar {
@include flex(1); flex: 1;
width: 210px; width: 210px;
} }
.filters-inner { .filters-inner {

11
app/styles/layout/login.scss
View File

@ -1,11 +1,11 @@
.login-main { .login-main {
@extend %triangled-bg; @extend %triangled-bg;
//@include table-flex(center, center, flex, row, wrap, center); //@include table-flex(center, center, flex, row, wrap, center);
@include display(flex); align-items: center;
@include align-items(center);
@include flex-direction(row);
@include justify-content(center);
bottom: 0; bottom: 0;
display: flex;
flex-direction: row;
justify-content: center;
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
@ -15,7 +15,7 @@
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.login-container { .login-container {
@include flex-basis(400px); flex-basis: 400px;
} }
.logo-svg { .logo-svg {
padding: 0 33%; padding: 0 33%;
@ -72,4 +72,3 @@
} }
} }
} }

10
app/styles/layout/not-found.scss
View File

@ -1,18 +1,18 @@
.error-main { .error-main {
@extend %background-taiga; @extend %background-taiga;
@include display(flex); align-items: center;
@include align-items(center);
@include flex-direction(row);
@include justify-content(center);
bottom: 0; bottom: 0;
display: flex;
flex-direction: row;
justify-content: center;
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 999; z-index: 999;
.error-container { .error-container {
@include flex-basis(400px);
color: $white; color: $white;
flex-basis: 400px;
text-align: center; text-align: center;
} }
.logo-svg { .logo-svg {

2
app/styles/layout/typography.scss
View File

@ -93,8 +93,8 @@ a:visited {
color: $grayer; color: $grayer;
text-decoration: none; text-decoration: none;
&:hover { &:hover {
@include transition (color .3s linear);
color: $green-taiga; color: $green-taiga;
transition: color .3s linear;
} }
} }

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

@ -3,14 +3,14 @@
.us-title { .us-title {
@extend %large; @extend %large;
@extend %text; @extend %text;
@include transition(all .2s linear);
background: $whitish; background: $whitish;
margin-bottom: .5rem; margin-bottom: .5rem;
padding: 1rem; padding: 1rem;
position: relative; position: relative;
transition: all .2s linear;
&.blocked { &.blocked {
@include transition(all .2s linear);
background: $red; background: $red;
transition: all .2s linear;
vertical-align: middle; vertical-align: middle;
.us-title-text, .us-title-text,
input { input {
@ -21,8 +21,8 @@
.us-related-task { .us-related-task {
color: $white; color: $white;
a { a {
@include transition(color .3s linear);
color: $white; color: $white;
transition: color .3s linear;
&:hover { &:hover {
color: $red-light; color: $red-light;
} }
@ -33,8 +33,8 @@
color: $white; color: $white;
float: right; float: right;
&:hover { &:hover {
@include transition(color .3s linear);
color: $red-light; color: $red-light;
transition: color .3s linear;
} }
} }
.issue-nav { .issue-nav {
@ -59,8 +59,8 @@
max-width: 94%; max-width: 94%;
&:hover { &:hover {
.icon-edit { .icon-edit {
@include transition(opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
} }
@ -95,9 +95,9 @@
color: $gray-light; color: $gray-light;
margin-top: .5rem; margin-top: .5rem;
a { a {
@include transition(color .3s linear);
border-left: 1px solid $gray-light; border-left: 1px solid $gray-light;
padding: 0 .2rem; padding: 0 .2rem;
transition: color .3s linear;
&:hover { &:hover {
color: $green-taiga; color: $green-taiga;
} }
@ -155,9 +155,9 @@
&:hover { &:hover {
.view-description { .view-description {
.edit { .edit {
@include transition(all .2s linear);
opacity: 1; opacity: 1;
top: -1.5rem; top: -1.5rem;
transition: all .2s linear;
} }
.editable { .editable {
background: $whitish; background: $whitish;
@ -188,8 +188,8 @@
top: 0; top: 0;
} }
&:hover { &:hover {
@include transition(opacity .2s linear);
opacity: .3; opacity: .3;
transition: opacity .2s linear;
} }
} }
.edit { .edit {
@ -197,13 +197,13 @@
} }
.view-description { .view-description {
.edit { .edit {
@include transition(all .2s linear);
background: $whitish; background: $whitish;
left: 0; left: 0;
opacity: 0; opacity: 0;
padding: .2rem .5rem; padding: .2rem .5rem;
position: absolute; position: absolute;
top: 0; top: 0;
transition: all .2s linear;
} }
} }
.edit-description { .edit-description {
@ -211,10 +211,10 @@
top: .4rem; top: .4rem;
} }
.edit { .edit {
@include transition(all .2s linear);
position: absolute; position: absolute;
right: 2.5rem; right: 2.5rem;
top: .4rem; top: .4rem;
transition: all .2s linear;
} }
} }
} }
@ -256,13 +256,13 @@
position: relative; position: relative;
> li { > li {
@include table-flex-child(1, 18%, 0); @include table-flex-child(1, 18%, 0);
@include transition(color .3s linear);
border-right: 1px solid rgba($grayer, .3); border-right: 1px solid rgba($grayer, .3);
color: rgba($grayer, .3); color: rgba($grayer, .3);
display: inline-block; display: inline-block;
margin: .5rem .1rem; margin: .5rem .1rem;
position: relative; position: relative;
text-align: center; text-align: center;
transition: color .3s linear;
&.active { &.active {
color: rgba($green-taiga, 1); color: rgba($green-taiga, 1);
} }
@ -317,15 +317,15 @@
margin: 0; margin: 0;
} }
div { div {
@include transition(background .2s ease-in);
background: darken($whitish, 5%); background: darken($whitish, 5%);
padding: .5rem; padding: .5rem;
padding-right: 1rem; padding-right: 1rem;
transition: background .2s ease-in;
} }
.clickable { .clickable {
&:hover { &:hover {
@include transition(background .2s ease-in);
background: darken($whitish, 10%); background: darken($whitish, 10%);
transition: background .2s ease-in;
} }
} }
} }
@ -338,8 +338,8 @@
color: darken($whitish, 20%); color: darken($whitish, 20%);
float: right; float: right;
&.loading span { &.loading span {
@include animation (loading .5s linear); animation: loading .5s linear;
@include animation (spin 1s linear infinite); animation: spin 1s linear infinite;
} }
} }
} }

10
app/styles/layout/wiki.scss
View File

@ -4,12 +4,12 @@
color: $gray-light; color: $gray-light;
&:hover { &:hover {
span { span {
@include transition(color .2s linear);
color: $grayer; color: $grayer;
transition: color .2s linear;
} }
.icon { .icon {
@include transition(color .2s linear);
color: $red; color: $red;
transition: color .2s linear;
} }
} }
.icon { .icon {
@ -29,27 +29,27 @@
cursor: pointer; cursor: pointer;
} }
.edit { .edit {
@include transition(all .2s linear);
opacity: 1; opacity: 1;
top: -1.5rem; top: -1.5rem;
transition: all .2s linear;
} }
} }
.edit { .edit {
@include transition(all .2s linear);
background: $whitish; background: $whitish;
left: 0; left: 0;
opacity: 0; opacity: 0;
padding: .2rem .5rem; padding: .2rem .5rem;
position: absolute; position: absolute;
top: 0; top: 0;
transition: all .2s linear;
} }
} }
.edit-wiki-content { .edit-wiki-content {
.icon { .icon {
&:hover { &:hover {
@include transition(all .2s linear);
color: $grayer; color: $grayer;
opacity: .3; opacity: .3;
transition: all .2s linear;
} }
} }
.preview-icon { .preview-icon {

2
app/styles/modules/admin/admin-common.scss
View File

@ -16,8 +16,8 @@
padding: 1rem; padding: 1rem;
&:hover { &:hover {
.edit-value { .edit-value {
@include transition(opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
} }

2
app/styles/modules/admin/admin-functionalities.scss
View File

@ -5,7 +5,6 @@
width: 100%; width: 100%;
} }
.functionality { .functionality {
@include transition(all .2s linear);
@include table-flex(center, center, flex, column, wrap, center); @include table-flex(center, center, flex, column, wrap, center);
background-color: $whitish; background-color: $whitish;
display: inline-block; display: inline-block;
@ -15,6 +14,7 @@
opacity: .5; opacity: .5;
padding: 1rem; padding: 1rem;
position: relative; position: relative;
transition: all .2s linear;
vertical-align: top; vertical-align: top;
width: 32%; width: 32%;
&:nth-child(3n+1) { &:nth-child(3n+1) {

6
app/styles/modules/admin/admin-membership-table.scss
View File

@ -54,9 +54,9 @@
float: rsdsdfdvsdvight; float: rsdsdfdvsdvight;
} }
&:hover { &:hover {
@include transition (background-color .3s linear);
background-color: $red; background-color: $red;
color: $white; color: $white;
transition: background-color .3s linear;
} }
} }
.delete { .delete {
@ -108,9 +108,9 @@
width: 500px; width: 500px;
z-index: 999; z-index: 999;
+ div { + div {
@include transition (all .2s linear);
background-color: $button-gray; background-color: $button-gray;
height: 25px; height: 25px;
transition: all .2s linear;
width: 50%; width: 50%;
} }
~ .check-text { ~ .check-text {
@ -131,9 +131,9 @@
} }
input[type=checkbox]:checked { input[type=checkbox]:checked {
+ div { + div {
@include transition (all .2s linear);
background-color: #74a218; background-color: #74a218;
margin-left: 50%; margin-left: 50%;
transition: all .2s linear;
} }
~ .check-yes { ~ .check-yes {
opacity: .6; opacity: .6;

4
app/styles/modules/admin/admin-menu.scss
View File

@ -13,14 +13,14 @@
padding: 1rem 0 1rem 1rem; padding: 1rem 0 1rem 1rem;
&:hover { &:hover {
.icon { .icon {
@include transition (opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
} }
.active { .active {
@include transition (opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
.icon { .icon {
color: $blackish; color: $blackish;

16
app/styles/modules/admin/admin-roles.scss
View File

@ -6,11 +6,11 @@
} }
.edit-value { .edit-value {
@extend %medium; @extend %medium;
@include transition(opacity .3s linear);
color: $gray-light; color: $gray-light;
cursor: pointer; cursor: pointer;
margin-left: .5rem; margin-left: .5rem;
opacity: 0; opacity: 0;
transition: opacity .3s linear;
} }
.edit-role { .edit-role {
@include table-flex(stretch, left, center, row, wrap); @include table-flex(stretch, left, center, row, wrap);
@ -23,12 +23,12 @@
width: 50%; width: 50%;
} }
.icon-floppy { .icon-floppy {
@include transition(color.3s linear);
color: $gray-light; color: $gray-light;
margin-left: .5rem; margin-left: .5rem;
transition: color.3s linear;
&:hover { &:hover {
@include transition(color.3s linear);
color: $green-taiga; color: $green-taiga;
transition: color.3s linear;
} }
} }
} }
@ -39,9 +39,9 @@
padding: .5rem; padding: .5rem;
} }
.general-category { .general-category {
@include display(flex); align-items: center;
@include align-items(center); display: flex;
@include justify-content(flex-end); justify-content: flex-end;
padding-bottom: 2rem; padding-bottom: 2rem;
.check { .check {
margin-left: .5rem; margin-left: .5rem;
@ -65,9 +65,9 @@
width: 500px; width: 500px;
z-index: 999; z-index: 999;
+ div { + div {
@include transition (all .2s linear);
background-color: $button-gray; background-color: $button-gray;
height: 25px; height: 25px;
transition: all .2s linear;
width: 50%; width: 50%;
} }
~ .check-text { ~ .check-text {
@ -88,9 +88,9 @@
} }
input[type=checkbox]:checked { input[type=checkbox]:checked {
+ div { + div {
@include transition (all .2s linear);
background-color: #74a218; background-color: #74a218;
margin-left: 50%; margin-left: 50%;
transition: all .2s linear;
} }
~ .check-yes { ~ .check-yes {
opacity: .6; opacity: .6;

2
app/styles/modules/admin/admin-submenu-roles.scss
View File

@ -20,8 +20,8 @@
&:hover { &:hover {
color: $blackish; color: $blackish;
.icon { .icon {
@include transition (opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
} }

2
app/styles/modules/admin/admin-submenu.scss
View File

@ -20,8 +20,8 @@
&:hover { &:hover {
color: $blackish; color: $blackish;
.icon { .icon {
@include transition (opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
} }

10
app/styles/modules/admin/project-values.scss
View File

@ -11,8 +11,8 @@
color: $gray-light; color: $gray-light;
opacity: 0; opacity: 0;
&:hover { &:hover {
@include transition (all .2s ease-in);
color: $grayer; color: $grayer;
transition: all .2s ease-in;
} }
} }
} }
@ -24,12 +24,12 @@
.project-values-body { .project-values-body {
.project-values-row { .project-values-row {
&:hover { &:hover {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
cursor: move; cursor: move;
transition: background .2s ease-in;
.icon { .icon {
@include transition (opacity .2s ease-in);
opacity: 1; opacity: 1;
transition: opacity .2s ease-in;
} }
} }
} }
@ -42,8 +42,8 @@
@include table-flex-child(1, 0, 0); @include table-flex-child(1, 0, 0);
.checksley-error-list { .checksley-error-list {
left: 0; left: 0;
top: 35px;
right: auto; right: auto;
top: 35px;
white-space: nowrap; white-space: nowrap;
} }
} }
@ -60,8 +60,8 @@
color: $gray; color: $gray;
margin-right: .5rem; margin-right: .5rem;
&:hover { &:hover {
@include transition(color .3s linear);
color: $green-taiga; color: $green-taiga;
transition: color .3s linear;
.icon-delete { .icon-delete {
color: $red; color: $red;
} }

8
app/styles/modules/admin/third-parties.scss
View File

@ -26,23 +26,23 @@
} }
.select-input-text { .select-input-text {
.field-with-option { .field-with-option {
@include display(flex); display: flex;
} }
.option-wrapper { .option-wrapper {
@include display(flex); align-items: center;
@include align-items(center);
border: 1px solid $gray-light; border: 1px solid $gray-light;
border-left: 0; border-left: 0;
border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0;
cursor: pointer; cursor: pointer;
display: flex;
padding: 0 1rem; padding: 0 1rem;
} }
.help-copy { .help-copy {
@extend %small; @extend %small;
opacity: 0; opacity: 0;
&.visible { &.visible {
@include transition(opacity .2s linear);
opacity: 1; opacity: 1;
transition: opacity .2s linear;
} }
} }
} }

6
app/styles/modules/auth/change-password-from-recovery.scss
View File

@ -9,21 +9,21 @@
} }
input:focus { input:focus {
+.get-token { +.get-token {
@include transition(opacity .5s linear);
opacity: 0; opacity: 0;
transition: opacity .5s linear;
} }
} }
.get-token { .get-token {
@extend %small; @extend %small;
@include transition(all .3s linear);
color: $gray-light; color: $gray-light;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: .5rem; top: .5rem;
transition: all .3s linear;
&:hover { &:hover {
@include transition(color .3s linear);
color: $grayer; color: $grayer;
transition: color .3s linear;
} }
} }
} }

6
app/styles/modules/auth/login-form.scss
View File

@ -4,21 +4,21 @@
} }
input:focus { input:focus {
+.forgot-pass { +.forgot-pass {
@include transition(opacity .5s linear);
opacity: 0; opacity: 0;
transition: opacity .5s linear;
} }
} }
.forgot-pass { .forgot-pass {
@extend %small; @extend %small;
@include transition(all .3s linear);
color: $gray-light; color: $gray-light;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: .5rem; top: .5rem;
transition: all .3s linear;
&:hover { &:hover {
@include transition(color .3s linear);
color: $grayer; color: $grayer;
transition: color .3s linear;
} }
} }
.remember-me { .remember-me {

18
app/styles/modules/backlog/backlog-table.scss
View File

@ -115,12 +115,12 @@
flex-wrap: nowrap; flex-wrap: nowrap;
position: relative; position: relative;
&:hover { &:hover {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
transition: background .2s ease-in;
.us-settings, .us-settings,
.icon-drag-v { .icon-drag-v {
@include transition (all .2s ease-in);
opacity: 1; opacity: 1;
transition: all .2s ease-in;
} }
} }
&:last-child { &:last-child {
@ -131,9 +131,9 @@
height: 40px; height: 40px;
} }
&.ui-sortable-helper { &.ui-sortable-helper {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
box-shadow: 1px 1px 10px rgba($black, .1); box-shadow: 1px 1px 10px rgba($black, .1);
transition: background .2s ease-in;
} }
.points { .points {
.not-clickable { .not-clickable {
@ -145,19 +145,19 @@
} }
} }
.row-selected { .row-selected {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
transition: background .2s ease-in;
} }
.user-story-name { .user-story-name {
@include table-flex($flex-wrap: nowrap); @include table-flex($flex-wrap: nowrap);
input { input {
@include flex-shrink(0); flex-shrink: 0;
margin-right: 1rem; margin-right: 1rem;
vertical-align: super; vertical-align: super;
&:checked { &:checked {
+a { +a {
@include transition (color .2s ease-in);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .2s ease-in;
} }
} }
} }
@ -184,8 +184,8 @@
border-bottom: 1px solid $white; border-bottom: 1px solid $white;
color: $white; color: $white;
&:hover { &:hover {
@include transition (background .2s ease-in);
background: $red; background: $red;
transition: background .2s ease-in;
} }
a { a {
color: $white !important; color: $white !important;
@ -218,12 +218,12 @@
.us-settings a, .us-settings a,
.icon-drag-v { .icon-drag-v {
@extend %large; @extend %large;
@include transition (all .2s ease-in);
color: $gray-light; color: $gray-light;
transition: all .2s ease-in;
width: 30px; width: 30px;
&:hover { &:hover {
@include transition (all .2s ease-in);
color: $grayer; color: $grayer;
transition: all .2s ease-in;
} }
} }
.us-settings { .us-settings {

40
app/styles/modules/backlog/sprints.scss
View File

@ -48,37 +48,37 @@
&:hover { &:hover {
.icon-edit { .icon-edit {
@include transition (opacity .2s ease-in);
opacity: 1; opacity: 1;
transition: opacity .2s ease-in;
} }
} }
.icon { .icon {
display: inline-block; display: inline-block;
} }
.icon-arrow-up { .icon-arrow-up {
@include transform(rotate(180deg)); transform: rotate(180deg);
@include transition (all .2s linear); transition: all .2s linear;
vertical-align: baseline; vertical-align: baseline;
&.active { &.active {
@include transform(rotate(0)); transform: rotate(0);
@include transition (all .2s linear); transition: all .2s linear;
} }
&:hover { &:hover {
@include transition(color .2s linear);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .2s linear;
} }
} }
.icon-edit { .icon-edit {
@include transition (opacity .2s ease-in);
color: $gray-light; color: $gray-light;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
transition: opacity .2s ease-in;
vertical-align: baseline; vertical-align: baseline;
&:hover { &:hover {
@include transition (color .2s ease-in);
color: $green-taiga; color: $green-taiga;
transition: color .2s ease-in;
} }
} }
.number { .number {
@ -138,9 +138,9 @@
text-align: left; text-align: left;
width: 100%; width: 100%;
&:hover { &:hover {
@include transition (background .2s ease-in);
background: lighten($gray-light, 12%); background: lighten($gray-light, 12%);
cursor: move; cursor: move;
transition: background .2s ease-in;
} }
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
@ -150,9 +150,9 @@
height: 40px; height: 40px;
} }
&.ui-sortable-helper { &.ui-sortable-helper {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
box-shadow: 1px 1px 10px rgba($black, .1); box-shadow: 1px 1px 10px rgba($black, .1);
transition: background .2s ease-in;
} }
} }
@ -209,16 +209,16 @@
.sprint-old-open { .sprint-old-open {
.sprint-name { .sprint-name {
.icon-arrow-up { .icon-arrow-up {
@include transform(rotate(180deg)); transform: rotate(180deg);
@include transition (all .2s linear); transition: all .2s linear;
vertical-align: baseline; vertical-align: baseline;
&.active { &.active {
@include transform(rotate(0)); transform: rotate(0);
@include transition (all .2s linear); transition: all .2s linear;
} }
&:hover { &:hover {
@include transition(color .2s linear);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .2s linear;
} }
} }
} }
@ -231,16 +231,16 @@
} }
.sprint-name { .sprint-name {
.icon-arrow-up { .icon-arrow-up {
@include transform(rotate(180deg)); transform: rotate(180deg);
@include transition (all .2s linear); transition: all .2s linear;
vertical-align: baseline; vertical-align: baseline;
&.active { &.active {
@include transform(rotate(0)); transform: rotate(0);
@include transition (all .2s linear); transition: all .2s linear;
} }
&:hover { &:hover {
@include transition(color .2s linear);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .2s linear;
} }
} }
} }

26
app/styles/modules/backlog/taskboard-table.scss
View File

@ -32,7 +32,7 @@ $column-margin: 0 10px 0 0;
&.task-column, &.task-column,
.task-column { .task-column {
@include table-flex(flex-start); @include table-flex(flex-start);
@include flex-direction(row); flex-direction: row;
} }
.avatar-task-link { .avatar-task-link {
display: block; display: block;
@ -57,12 +57,12 @@ $column-margin: 0 10px 0 0;
position: absolute; position: absolute;
} }
.task-colum-name { .task-colum-name {
@extend %large;
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
@include table-flex(); @include table-flex();
@include justify-content(space-between);
@extend %large;
background: $whitish; background: $whitish;
border-top: 3px solid $gray-light; border-top: 3px solid $gray-light;
justify-content: space-between;
margin: $column-margin; margin: $column-margin;
max-width: $column-width; max-width: $column-width;
padding: .5rem 1rem; padding: .5rem 1rem;
@ -74,21 +74,21 @@ $column-margin: 0 10px 0 0;
} }
.icon { .icon {
@extend %medium; @extend %medium;
@include transition(color .2s linear);
color: $gray-light; color: $gray-light;
margin-right: .3rem; margin-right: .3rem;
transition: color .2s linear;
&:hover { &:hover {
color: $green-taiga; color: $green-taiga;
} }
&.hfold, &.hfold,
&.hunfold { &.hunfold {
@include transform(rotate(90deg));
display: inline-block; display: inline-block;
transform: rotate(90deg);
} }
} }
&.column-fold { &.column-fold {
@include align-items(center); align-items: center;
@include justify-content(center); justify-content: center;
padding: .3rem 0; padding: .3rem 0;
span { span {
display: none; display: none;
@ -134,8 +134,8 @@ $column-margin: 0 10px 0 0;
width: 100%; width: 100%;
&:hover { &:hover {
.new-task { .new-task {
@include transition(opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
&.blocked { &.blocked {
@ -144,11 +144,11 @@ $column-margin: 0 10px 0 0;
border-radius: 3px; border-radius: 3px;
a, a,
.points-value { .points-value {
@include transition(color .3s linear);
color: rgba($white, .9); color: rgba($white, .9);
transition: color .3s linear;
&:hover { &:hover {
@include transition(color .3s linear);
color: rgba($white, 1); color: rgba($white, 1);
transition: color .3s linear;
} }
} }
} }
@ -177,11 +177,11 @@ $column-margin: 0 10px 0 0;
.taskboard-userstory-box { .taskboard-userstory-box {
padding: .5rem .5rem .5rem 1.5rem; padding: .5rem .5rem .5rem 1.5rem;
.icon { .icon {
@include transition(color .2s linear);
color: $gray-light; color: $gray-light;
position: absolute; position: absolute;
right: .5rem; right: .5rem;
top: .7rem; top: .7rem;
transition: color .2s linear;
&:hover { &:hover {
color: $green-taiga; color: $green-taiga;
} }
@ -230,13 +230,13 @@ $column-margin: 0 10px 0 0;
margin-left: .5rem; margin-left: .5rem;
&:hover { &:hover {
span { span {
@include transition (opacity .2s linear);
opacity: 1; opacity: 1;
transition: opacity .2s linear;
} }
} }
} }
span { span {
@include transition (opacity .2s linear);
opacity: 0; opacity: 0;
transition: opacity .2s linear;
} }
} }

6
app/styles/modules/common/assigned-to.scss
View File

@ -5,16 +5,16 @@
&:hover { &:hover {
.assigned-to { .assigned-to {
.icon-delete { .icon-delete {
@include transition (opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
} }
&.loading { &.loading {
width: 100%; width: 100%;
span { span {
@include animation (loading .5s linear); animation: loading .5s linear;
@include animation (spin 1s linear infinite); animation: spin 1s linear infinite;
font-size: 30px; font-size: 30px;
padding: 20px 0; padding: 20px 0;
text-align: center; text-align: center;

8
app/styles/modules/common/attachments.scss
View File

@ -20,8 +20,8 @@
color: $grayer; color: $grayer;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@include transition (color .2s ease-in);
color: $green-taiga; color: $green-taiga;
transition: color .2s ease-in;
} }
} }
} }
@ -36,15 +36,15 @@
&:hover { &:hover {
.attachment-settings { .attachment-settings {
.settings { .settings {
@include transition (opacity .2s ease-in);
opacity: 1; opacity: 1;
transition: opacity .2s ease-in;
} }
} }
} }
&.ui-sortable-helper { &.ui-sortable-helper {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
box-shadow: 1px 1px 10px rgba($black, .1); box-shadow: 1px 1px 10px rgba($black, .1);
transition: background .2s ease-in;
} }
&.deprecated { &.deprecated {
color: $gray-light; color: $gray-light;
@ -157,8 +157,8 @@
margin-left: .5rem; margin-left: .5rem;
} }
&:hover { &:hover {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
transition: background .2s ease-in;
} }
} }

14
app/styles/modules/common/category-config.scss
View File

@ -4,9 +4,9 @@
border-top: 1px solid $gray-light; border-top: 1px solid $gray-light;
} }
.resume { .resume {
@include display(flex); align-items: space-between;
@include align-items(space-between);
cursor: pointer; cursor: pointer;
display: flex;
padding: 1rem; padding: 1rem;
position: relative; position: relative;
} }
@ -19,7 +19,7 @@
padding-right: 5px; padding-right: 5px;
} }
.summary-role { .summary-role {
@include flex(1); flex: 1;
width: 280px; width: 280px;
.role-summary-single { .role-summary-single {
background: $gray-light; background: $gray-light;
@ -36,8 +36,8 @@
} }
} }
.icon { .icon {
@include flex(1);
@extend %xlarge; @extend %xlarge;
flex: 1;
text-align: right; text-align: right;
} }
.category-items { .category-items {
@ -49,10 +49,10 @@
} }
} }
.category-item { .category-item {
@include display(flex); align-items: center;
@include justify-content(space-between);
@include align-items(center);
border-bottom: 1px solid $very-light-gray; border-bottom: 1px solid $very-light-gray;
display: flex;
justify-content: space-between;
padding: .5rem .5rem .5rem 2rem; padding: .5rem .5rem .5rem 2rem;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;

4
app/styles/modules/common/colors-table.scss
View File

@ -15,8 +15,8 @@
padding: 1rem; padding: 1rem;
&:hover { &:hover {
.options-column { .options-column {
@include transition (opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
&.edition, &.edition,
@ -78,9 +78,9 @@
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
.row { .row {
&:hover { &:hover {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
cursor: move; cursor: move;
transition: background .2s ease-in;
} }
} }
} }

4
app/styles/modules/common/external-reference.scss
View File

@ -2,8 +2,8 @@
.external-reference { .external-reference {
color: $white; color: $white;
a { a {
@include transition(color .3s linear);
color: $white; color: $white;
transition: color .3s linear;
&:hover { &:hover {
color: $red-light; color: $red-light;
} }
@ -16,9 +16,9 @@
color: $gray-light; color: $gray-light;
margin-top: .5rem; margin-top: .5rem;
a { a {
@include transition(color .3s linear);
border-left: 1px solid $gray-light; border-left: 1px solid $gray-light;
padding: 0 .2rem; padding: 0 .2rem;
transition: color .3s linear;
&:hover { &:hover {
color: $green-taiga; color: $green-taiga;
} }

34
app/styles/modules/common/history.scss
View File

@ -6,16 +6,16 @@
padding: .5rem; padding: .5rem;
&:hover { &:hover {
.icon { .icon {
@include transform(rotate(180deg));
@include transition(all .2s linear);
color: $green-taiga; color: $green-taiga;
transform: rotate(180deg);
transition: all .2s linear;
} }
} }
.icon { .icon {
@include transform(rotate(0));
@include transition(all .2s linear);
color: $grayer; color: $grayer;
float: right; float: right;
transform: rotate(0);
transition: all .2s linear;
} }
} }
.change-entry { .change-entry {
@ -48,15 +48,15 @@
} }
} }
a { a {
@include transition(color .2s ease-in);
color: $gray-light; color: $gray-light;
padding: 0 2rem; padding: 0 2rem;
transition: color .2s ease-in;
&.active { &.active {
color: $grayer; color: $grayer;
} }
&:hover { &:hover {
@include transition(color .2s ease-in);
color: $green-taiga; color: $green-taiga;
transition: color .2s ease-in;
} }
} }
.icon { .icon {
@ -70,12 +70,12 @@
display: block; display: block;
} }
textarea { textarea {
@include transition(height .3s ease-in);
height: 6rem; height: 6rem;
transition: height .3s ease-in;
} }
.help-markdown { .help-markdown {
@include transition(opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
.preview-icon { .preview-icon {
opacity: 1; opacity: 1;
@ -116,8 +116,8 @@ a.show-more-comments {
display: block; display: block;
padding: 1rem 0 1rem 1rem; padding: 1rem 0 1rem 1rem;
&:hover { &:hover {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
transition: background .2s ease-in;
} }
} }
.more-comments { .more-comments {
@ -135,7 +135,7 @@ a.show-more-comments {
&.activeanimation { &.activeanimation {
.comment-single.ng-enter:last-child, .comment-single.ng-enter:last-child,
.comment-single.ng-leave:last-child { .comment-single.ng-leave:last-child {
@include transition(all .3s ease-in); transition: all .3s ease-in;
} }
.comment-single.ng-enter:last-child, .comment-single.ng-enter:last-child,
.comment-single.ng-leave.ng-leave-active:last-child { .comment-single.ng-leave.ng-leave-active:last-child {
@ -154,12 +154,12 @@ a.show-more-comments {
position: relative; position: relative;
&:hover { &:hover {
.comment-delete { .comment-delete {
@include transition(opacity .2s linear);
opacity: 1; opacity: 1;
transition: opacity .2s linear;
} }
.comment-restore { .comment-restore {
@include transition(opacity .2s linear);
opacity: 1; opacity: 1;
transition: opacity .2s linear;
} }
} }
&:first-child { &:first-child {
@ -177,12 +177,12 @@ a.show-more-comments {
color: $gray-light; color: $gray-light;
margin-left: .3rem; margin-left: .3rem;
&:hover { &:hover {
@include transition(color .2s linear);
color: $green-taiga; color: $green-taiga;
transition: color .2s linear;
} }
} }
img { img {
@include filter(grayscale(100%)); filter: grayscale(100%);
opacity: .5; opacity: .5;
} }
.comment-body { .comment-body {
@ -203,8 +203,8 @@ a.show-more-comments {
vertical-align: baseline; vertical-align: baseline;
} }
&:hover { &:hover {
@include transition(color .2s linear);
color: $green-taiga; color: $green-taiga;
transition: color .2s linear;
} }
} }
.username { .username {
@ -244,15 +244,15 @@ a.show-more-comments {
margin-bottom: 0; margin-bottom: 0;
} }
.comment-delete { .comment-delete {
@include transition(all .2s linear);
color: $red; color: $red;
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 2rem; top: 2rem;
transition: all .2s linear;
&:hover { &:hover {
@include transition(color .2s linear);
color: $red-light; color: $red-light;
transition: color .2s linear;
} }
} }
&.activity { &.activity {

19
app/styles/modules/common/lightbox.scss
View File

@ -14,8 +14,8 @@
border-right: 1px solid $gray-light; border-right: 1px solid $gray-light;
} }
&:hover { &:hover {
@include transition(color .2s linear);
color: $grayer; color: $grayer;
transition: color .2s linear;
} }
} }
.active { .active {
@ -40,12 +40,12 @@
label { label {
@extend %button; @extend %button;
@include transition(all .2s ease-in);
border: 1px solid $gray-light; border: 1px solid $gray-light;
color: $grayer; color: $grayer;
cursor: pointer; cursor: pointer;
display: block; display: block;
padding: 7px 30px; padding: 7px 30px;
transition: all .2s ease-in;
&:hover { &:hover {
span { span {
color: $white; color: $white;
@ -73,21 +73,20 @@
.requirement, .requirement,
.iocaine { .iocaine {
&:hover { &:hover {
@include transition(all .2s ease-in);
background: $fresh-taiga; background: $fresh-taiga;
border: 1px solid $fresh-taiga; border: 1px solid $fresh-taiga;
color: $white; color: $white;
transition: all .2s ease-in;
} }
} }
.blocked { .blocked {
padding: 8px 30px; padding: 8px 30px;
&:hover { &:hover {
@include transition(all .2s ease-in);
background: $red-light; background: $red-light;
border: 1px solid $red-light; border: 1px solid $red-light;
color: $white; color: $white;
transition: all .2s ease-in;
} }
} }
@ -207,15 +206,15 @@
@include table-flex-child(0, 600px, 0, 600px); @include table-flex-child(0, 600px, 0, 600px);
} }
.last-sprint-name { .last-sprint-name {
@include transition (opacity .3s linear);
color: $gray; color: $gray;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: .7rem; top: .7rem;
transition: opacity .3s linear;
&.disappear { &.disappear {
@include transition (opacity .3s linear);
opacity: 0; opacity: 0;
transition: opacity .3s linear;
} }
} }
.dates { .dates {
@ -238,12 +237,12 @@
margin-top: 1rem; margin-top: 1rem;
text-align: right; text-align: right;
a { a {
@include transition (color .3s linear);
color: $gray-light; color: $gray-light;
margin-left: .5rem; margin-left: .5rem;
transition: color .3s linear;
&:hover { &:hover {
@include transition (color .3s linear);
color: $red; color: $red;
transition: color .3s linear;
} }
} }
} }
@ -440,7 +439,7 @@
cursor: pointer; cursor: pointer;
} }
&:hover { &:hover {
@include transition(background .3s linear); transition: background .3s linear;
} }
&.active { &.active {
.icon { .icon {

10
app/styles/modules/common/nav.scss
View File

@ -45,8 +45,8 @@
display: block; display: block;
text-align: center; text-align: center;
&:hover { &:hover {
@include transition (color .3s linear);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .3s linear;
} }
span { span {
display: block; display: block;
@ -60,8 +60,8 @@
} }
} }
.active { .active {
@include transition (color .3s linear);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .3s linear;
} }
} }
@ -78,8 +78,8 @@
text-align: left; text-align: left;
text-transform: none; text-transform: none;
&:hover { &:hover {
@include transition (color .2s linear);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .2s linear;
} }
} }
} }
@ -87,8 +87,8 @@
margin: 0 5px 10px; margin: 0 5px 10px;
width: 80%; width: 80%;
&:hover { &:hover {
@include transition(border-color .3s linear);
border-color: $fresh-taiga; border-color: $fresh-taiga;
transition: border-color .3s linear;
} }
} }
.user-settings { .user-settings {
@ -100,8 +100,8 @@
color: $whitish; color: $whitish;
margin-right: .5rem; margin-right: .5rem;
&:hover { &:hover {
@include transition (color .3s linear);
color: $fresh-taiga; color: $fresh-taiga;
transition: color .3s linear;
} }
} }
} }

8
app/styles/modules/common/projects-nav.scss
View File

@ -1,5 +1,4 @@
.projects-nav { .projects-nav {
@include transform(translate3d(-300px, 0, 0));
background-color: #232323; background-color: #232323;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -9,6 +8,7 @@
padding: 2rem 1rem; padding: 2rem 1rem;
position: fixed; position: fixed;
top: 0; top: 0;
transform: translate3d(-300px, 0, 0);
width: 300px; width: 300px;
z-index: 99; z-index: 99;
form { form {
@ -68,12 +68,12 @@
width: 100%; width: 100%;
&.active, &.active,
&:hover { &:hover {
@include transition (background-color .3s linear);
background-color: $gray; background-color: $gray;
color: $green-taiga; color: $green-taiga;
transition: background-color .3s linear;
.icon { .icon {
@include transition (opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
.project-name { .project-name {
@ -111,12 +111,12 @@
width: 100%; width: 100%;
z-index: 99900; z-index: 99900;
.container { .container {
@include transform(translateY(-50%));
left: -200px; left: -200px;
margin: 0 auto; margin: 0 auto;
margin-top: 15%; margin-top: 15%;
opacity: 0; opacity: 0;
position: relative; position: relative;
transform: translateY(-50%);
width: 150px; width: 150px;
} }
p { p {

26
app/styles/modules/common/related-tasks.scss
View File

@ -16,8 +16,8 @@
color: $grayer; color: $grayer;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
@include transition (color .2s ease-in);
color: $green-taiga; color: $green-taiga;
transition: color .2s ease-in;
} }
} }
} }
@ -35,8 +35,8 @@
&:hover { &:hover {
background: transparent; background: transparent;
.task-settings { .task-settings {
@include transition (all .2s ease-in);
opacity: 1; opacity: 1;
transition: all .2s ease-in;
} }
} }
&:last-child { &:last-child {
@ -63,8 +63,8 @@
text-align: left; text-align: left;
&:hover { &:hover {
.icon { .icon {
@include transition (opacity .2s ease-in);
opacity: 1; opacity: 1;
transition: opacity .2s ease-in;
} }
} }
.not-clickable { .not-clickable {
@ -96,7 +96,7 @@
} }
} }
.task-name { .task-name {
@include display(flex); display: flex;
position: relative; position: relative;
a { a {
display: inline-block; display: inline-block;
@ -116,8 +116,8 @@
text-align: center; text-align: center;
width: 100%; width: 100%;
span { span {
@include animation (loading .5s linear); animation: loading .5s linear;
@include animation (spin 1s linear infinite); animation: spin 1s linear infinite;
} }
} }
} }
@ -160,11 +160,11 @@
width: 10%; width: 10%;
a { a {
@extend %large; @extend %large;
@include transition (all .2s ease-in);
color: $gray-light; color: $gray-light;
transition: all .2s ease-in;
&:hover { &:hover {
@include transition (all .2s ease-in);
color: $grayer; color: $grayer;
transition: all .2s ease-in;
} }
} }
} }
@ -179,8 +179,8 @@
} }
&:hover { &:hover {
.icon { .icon {
@include transition(opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
figcaption { figcaption {
@ -190,18 +190,18 @@
white-space: nowrap; white-space: nowrap;
} }
.icon { .icon {
@include transition(opacity .3s linear);
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: .5rem; right: .5rem;
top: .5rem; top: .5rem;
transition: opacity .3s linear;
} }
} }
.avatar { .avatar {
@include align-items(center); align-items: center;
@include display(flex); display: flex;
img { img {
@include flex-basis(35px) flex-basis: 35px;
} }
figcaption { figcaption {
margin-left: .5rem; margin-left: .5rem;

26
app/styles/modules/common/wizard.scss
View File

@ -36,11 +36,11 @@
} }
} }
.wizard-step { .wizard-step {
@include animation(formSlide .4s ease-in-out); animation: formSlide .4s ease-in-out;
@include animation-direction(alternate-reverse); animation-direction: alternate-reverse;
display: none; display: none;
&.active { &.active {
@include animation(formSlide .4s ease-in-out); animation: formSlide .4s ease-in-out;
&.create-step2, &.create-step2,
&.create-step3 { &.create-step3 {
@include table-flex(); @include table-flex();
@ -77,21 +77,21 @@
display: none; display: none;
&:checked { &:checked {
+label { +label {
@include transition(background .3s ease-in);
background: rgba($fresh-taiga, .7); background: rgba($fresh-taiga, .7);
transition: background .3s ease-in;
} }
} }
+label { +label {
@include transition(background .3s ease-in);
background: rgba($whitish, .7); background: rgba($whitish, .7);
cursor: pointer; cursor: pointer;
display: block; display: block;
margin-bottom: 1rem; margin-bottom: 1rem;
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
transition: background .3s ease-in;
&:hover { &:hover {
@include transition(background .3s ease-in);
background: rgba($green-taiga, .7); background: rgba($green-taiga, .7);
transition: background .3s ease-in;
} }
.icon { .icon {
@extend %xxlarge; @extend %xxlarge;
@ -117,22 +117,22 @@
width: 100%; width: 100%;
&.step1 { &.step1 {
.bar { .bar {
@include transition(width .6s ease-in-out); transition: width .6s ease-in-out;
width: 25%; width: 25%;
} }
.progress-state { .progress-state {
span { span {
&:nth-child(1) { &:nth-child(1) {
@include transition(color .3s ease-in-out);
@include transition-delay(.6s);
color: rgba($white, 1); color: rgba($white, 1);
transition: color .3s ease-in-out;
transition-delay: .6s;
} }
} }
} }
} }
&.step2 { &.step2 {
.bar { .bar {
@include transition(width .6s ease-in-out); transition: width .6s ease-in-out;
// width: 50%; // width: 50%;
width: 75%; width: 75%;
} }
@ -140,9 +140,9 @@
span { span {
&:nth-child(1), &:nth-child(1),
&:nth-child(2) { &:nth-child(2) {
@include transition(color .3s ease-in-out);
@include transition-delay(.6s);
color: rgba($white, 1); color: rgba($white, 1);
transition: color .3s ease-in-out;
transition-delay: .6s;
} }
} }
} }
@ -152,13 +152,13 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
span { span {
@include transition(all 1s ease-in);
color: rgba($white, .5); color: rgba($white, .5);
display: inline-block; display: inline-block;
margin-left: -100px; margin-left: -100px;
position: absolute; position: absolute;
text-align: center; text-align: center;
top: -2rem; top: -2rem;
transition: all 1s ease-in;
width: 200px; width: 200px;
&:nth-child(1) { &:nth-child(1) {
left: 25%; left: 25%;

14
app/styles/modules/filters/filters.scss
View File

@ -32,8 +32,8 @@
} }
.filters-inner { .filters-inner {
@include transition (all .1s ease-in);
opacity: 0; opacity: 0;
transition : all .1s ease-in;
.loading { .loading {
background: $grayer; background: $grayer;
border: 1px solid #b8b8b8; border: 1px solid #b8b8b8;
@ -47,8 +47,8 @@
float: none; float: none;
} }
span { span {
@include animation (loading .5s linear); animation : loading .5s linear;
@include animation (spin 1s linear infinite); animation : spin 1s linear infinite;
} }
} }
} }
@ -88,23 +88,23 @@
} }
} }
a { a {
@include transition (color .2s ease-in);
color: $grayer; color: $grayer;
display: block; display: block;
padding: .5rem 0 .5rem .5rem; padding: .5rem 0 .5rem .5rem;
transition : color .2s ease-in;
&:hover { &:hover {
@include transition (color .2s ease-in);
color: $green-taiga; color: $green-taiga;
transition : color .2s ease-in;
.icon { .icon {
@include transition (opacity .2s ease-in);
opacity: 1; opacity: 1;
transition : opacity .2s ease-in;
} }
} }
} }
.icon { .icon {
@include transition (opacity .2s ease-in);
color: $grayer; color: $grayer;
float: right; float: right;
opacity: 0; opacity: 0;
transition : opacity .2s ease-in;
} }
} }

4
app/styles/modules/filters/list-filters.scss
View File

@ -16,16 +16,16 @@
@extend %title; @extend %title;
opacity: .4; opacity: .4;
&:hover { &:hover {
@include transition (opacity .3s linear);
color: $blackish; color: $blackish;
opacity: 1; opacity: 1;
transition : opacity .3s linear;
} }
} }
.active { .active {
@include transition (opacity .3s linear);
color: $blackish; color: $blackish;
opacity: 1; opacity: 1;
transition : opacity .3s linear;
} }
.icon { .icon {
padding-right: .5rem; padding-right: .5rem;

12
app/styles/modules/home-projects-list.scss
View File

@ -65,7 +65,6 @@
} }
li { li {
@include table-flex-child(1, 230px, 0, 23.5%); @include table-flex-child(1, 230px, 0, 23.5%);
@include transition(background-color .3s linear);
background-color: rgba($white, .5); background-color: rgba($white, .5);
color: $whitish; color: $whitish;
height: 130px; height: 130px;
@ -73,13 +72,14 @@
margin-right: 1rem; margin-right: 1rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
transition: background-color .3s linear;
&:hover { &:hover {
@include transition(background-color .3s linear);
background-color: rgba($fresh-taiga, .5); background-color: rgba($fresh-taiga, .5);
cursor: pointer; cursor: pointer;
transition: background-color .3s linear;
p { p {
@include transition(color .3s linear);
color: $gray-light; color: $gray-light;
transition: color .3s linear;
} }
} }
} }
@ -88,8 +88,8 @@
line-height: 2rem; line-height: 2rem;
} }
p { p {
@include transition(color .3s linear);
color: $grayer; color: $grayer;
transition: color .3s linear;
} }
} }
@ -138,11 +138,11 @@
width: 100%; width: 100%;
&.active, &.active,
&:hover { &:hover {
@include transition (background-color .3s linear);
background-color: $gray; background-color: $gray;
transition: background-color .3s linear;
.icon { .icon {
@include transition (opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
} }

8
app/styles/modules/issues/issues-table.scss
View File

@ -6,16 +6,16 @@
} }
.row { .row {
&:hover { &:hover {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
transition : background .2s ease-in;
} }
.icon { .icon {
display: inline; display: inline;
} }
} }
.row-selected { .row-selected {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
transition : background .2s ease-in;
} }
.title { .title {
@extend %medium; @extend %medium;
@ -71,8 +71,8 @@
position: relative; position: relative;
&:hover { &:hover {
.icon { .icon {
@include transition(opacity .3s linear);
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
figcaption { figcaption {
@ -82,11 +82,11 @@
white-space: nowrap; white-space: nowrap;
} }
.icon { .icon {
@include transition(opacity .3s linear);
opacity: 0; opacity: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: .5rem; top: .5rem;
transition: opacity .3s linear;
} }
} }
.pop-status { .pop-status {

12
app/styles/modules/kanban/kanban-table.scss
View File

@ -12,12 +12,12 @@ $column-margin: 0 10px 0 0;
.vfold { .vfold {
&.task-colum-name { &.task-colum-name {
@include table-flex(); @include table-flex();
@include align-items(center); align-items: center;
@include justify-content(center);
@include transition(opacity .3s linear);
cursor: pointer; cursor: pointer;
justify-content: center;
opacity: .8; opacity: .8;
padding: .5rem 0; padding: .5rem 0;
transition: opacity .3s linear;
.icon-plus, .icon-plus,
.icon-bulk, .icon-bulk,
.icon-vfold, .icon-vfold,
@ -56,9 +56,9 @@ $column-margin: 0 10px 0 0;
@extend %large; @extend %large;
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
@include table-flex(); @include table-flex();
@include justify-content(space-between);
background: $whitish; background: $whitish;
border-top: 3px solid $gray-light; border-top: 3px solid $gray-light;
justify-content: space-between;
margin: $column-margin; margin: $column-margin;
padding: .5rem .5rem .5rem 1rem; padding: .5rem .5rem .5rem 1rem;
position: relative; position: relative;
@ -68,16 +68,16 @@ $column-margin: 0 10px 0 0;
} }
.icon { .icon {
@extend %medium; @extend %medium;
@include transition(color .2s linear);
color: $gray-light; color: $gray-light;
margin-right: .3rem; margin-right: .3rem;
transition: color .2s linear;
&:hover { &:hover {
color: $green-taiga; color: $green-taiga;
} }
&.hfold, &.hfold,
&.hunfold { &.hunfold {
@include transform(rotate(90deg));
display: inline-block; display: inline-block;
transform: rotate(90deg);
} }
} }
} }

4
app/styles/modules/search/search-filter.scss
View File

@ -12,15 +12,15 @@
@extend %title; @extend %title;
opacity: .2; opacity: .2;
&:hover { &:hover {
@include transition (opacity .3s linear);
color: $blackish; color: $blackish;
opacity: 1; opacity: 1;
transition: opacity .3s linear;
} }
} }
.active { .active {
@include transition (opacity .3s linear);
color: $blackish; color: $blackish;
opacity: 1; opacity: 1;
transition : opacity .3s linear;
} }
.icon { .icon {
margin-right: .4rem; margin-right: .4rem;

6
app/styles/modules/search/search-result-table.scss
View File

@ -10,8 +10,8 @@
@include table-flex($align-content: center, $align-items: center); @include table-flex($align-content: center, $align-items: center);
padding: .5rem; padding: .5rem;
&:hover { &:hover {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
transition: background .2s ease-in;
} }
.user-stories { .user-stories {
@include table-flex-child(5, 0, 1); @include table-flex-child(5, 0, 1);
@ -27,8 +27,8 @@
} }
} }
.row-selected { .row-selected {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
transition: background .2s ease-in;
} }
// TODO: refactor xaviju // TODO: refactor xaviju
@ -47,8 +47,8 @@
@extend %medium; @extend %medium;
color: $gray-light; color: $gray-light;
&:hover { &:hover {
@include transition (color .3s linear);
color: $grayer; color: $grayer;
transition: color .3s linear;
} }
} }
} }

6
app/styles/modules/team/team-filters.scss
View File

@ -18,17 +18,17 @@
padding: 1rem 0 1rem 1rem; padding: 1rem 0 1rem 1rem;
&:hover, &:hover,
&.active { &.active {
@include transition (color .3s linear);
color: $green-taiga; color: $green-taiga;
transition : color .3s linear;
.icon { .icon {
@include transition (opacity .3s linear);
opacity: 1; opacity: 1;
transition : opacity .3s linear;
} }
} }
} }
.active { .active {
@include transition (opacity .3s linear);
opacity: 1; opacity: 1;
transition : opacity .3s linear;
} }
.icon { .icon {
color: $blackish; color: $blackish;

16
app/styles/modules/team/team-table.scss
View File

@ -3,18 +3,18 @@
padding: .5rem; padding: .5rem;
} }
.username { .username {
@include flex(3); flex: 3;
min-width: 300px; min-width: 300px;
} }
.member-stats { .member-stats {
@include display(flex); align-content: center;
@include align-content(center); align-items: center;
@include align-items(center); display: flex;
@include justify-content(flex-end); flex: 6;
@include flex(6); justify-content: flex-end;
} }
.attribute { .attribute {
@include flex(1); flex: 1;
position: relative; position: relative;
text-align: center; text-align: center;
.icon, .icon,
@ -48,8 +48,8 @@
} }
&:hover { &:hover {
.icon { .icon {
@include transition (color .3s linear);
color: $red; color: $red;
transition : color .3s linear;
} }
} }
} }

4
app/styles/modules/user-settings/mail-notifications-table.scss
View File

@ -29,8 +29,8 @@
display: none; display: none;
&:checked { &:checked {
+label { +label {
@include transition(background .3s linear);
background: $green-taiga; background: $green-taiga;
transition: background .3s linear;
} }
} }
} }
@ -41,9 +41,9 @@
display: block; display: block;
padding: .5rem; padding: .5rem;
&:hover { &:hover {
@include transition(background .3s linear);
background: $fresh-taiga; background: $fresh-taiga;
cursor: pointer; cursor: pointer;
transition: background .3s linear;
} }
} }
} }

3
app/styles/modules/user-settings/user-profile.scss
View File

@ -27,8 +27,7 @@
} }
.icon-spinner { .icon-spinner {
@extend %xlarge; @extend %xlarge;
//@include transform(translate(50%, 50%)); animation: spin infinite .8s linear;
@include animation(spin infinite .8s linear);
color: $gray-light; color: $gray-light;
left: 40%; left: 40%;
position: absolute; position: absolute;

8
app/styles/modules/wiki/wiki-nav.scss
View File

@ -6,8 +6,8 @@
text-transform: uppercase; text-transform: uppercase;
&:hover { &:hover {
.icon { .icon {
@include transition (opacity 1s linear);
opacity: 1; opacity: 1;
transition: opacity 1s linear;
} }
} }
a { a {
@ -18,10 +18,10 @@
} }
} }
.icon { .icon {
@include transition (opacity 1s linear);
color: $blackish; color: $blackish;
float: right; float: right;
opacity: 0; opacity: 0;
transition: opacity 1s linear;
} }
input { input {
background: $grayer; background: $grayer;
@ -42,8 +42,8 @@
float: none; float: none;
} }
span { span {
@include animation (loading .5s linear); animation: loading .5s linear;
@include animation (spin 1s linear infinite); animation: spin 1s linear infinite;
} }
} }
} }

8
app/styles/modules/wiki/wiki-summary.scss
View File

@ -7,10 +7,10 @@
width: 32px; width: 32px;
} }
ul { ul {
@include display(flex); align-items: flex-start;
@include align-items(flex-start); display: flex;
@include flex-direction(row); flex-direction: row;
@include justify-content(flex-start); justify-content: flex-start;
} }
.username-edition { .username-edition {
min-width: 240px; min-width: 240px;

4
gulpfile.coffee
View File

@ -26,6 +26,7 @@ runSequence = require('run-sequence')
lazypipe = require('lazypipe') lazypipe = require('lazypipe')
rimraf = require('rimraf') rimraf = require('rimraf')
imagemin = require('gulp-imagemin') imagemin = require('gulp-imagemin')
autoprefixer = require('gulp-autoprefixer')
mainSass = require("./main-sass").files mainSass = require("./main-sass").files
@ -168,6 +169,9 @@ gulp.task "css-lint-app", ->
gulp.task "css-join", ["css-lint-app"], -> gulp.task "css-join", ["css-lint-app"], ->
gulp.src(mainSass.concat([paths.tmpStylesExtras])) gulp.src(mainSass.concat([paths.tmpStylesExtras]))
.pipe(concat("app.css")) .pipe(concat("app.css"))
.pipe(autoprefixer({
cascade: false
}))
.pipe(gulp.dest(paths.tmp)) .pipe(gulp.dest(paths.tmp))
gulp.task "css-app", (cb) -> gulp.task "css-app", (cb) ->

1
package.json
View File

@ -20,6 +20,7 @@
"coffee-script": "^1.8.0", "coffee-script": "^1.8.0",
"express": "^4.9.5", "express": "^4.9.5",
"gulp": "^3.8.8", "gulp": "^3.8.8",
"gulp-autoprefixer": "^2.0.0",
"gulp-cached": "0.0.3", "gulp-cached": "0.0.3",
"gulp-changed": "^0.4.0", "gulp-changed": "^0.4.0",
"gulp-clean": "^0.2.4", "gulp-clean": "^0.2.4",