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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -48,37 +48,37 @@
&:hover {
.icon-edit {
@include transition (opacity .2s ease-in);
opacity: 1;
transition: opacity .2s ease-in;
}
}
.icon {
display: inline-block;
}
.icon-arrow-up {
@include transform(rotate(180deg));
@include transition (all .2s linear);
transform: rotate(180deg);
transition: all .2s linear;
vertical-align: baseline;
&.active {
@include transform(rotate(0));
@include transition (all .2s linear);
transform: rotate(0);
transition: all .2s linear;
}
&:hover {
@include transition(color .2s linear);
color: $fresh-taiga;
transition: color .2s linear;
}
}
.icon-edit {
@include transition (opacity .2s ease-in);
color: $gray-light;
opacity: 0;
position: absolute;
right: 0;
top: 0;
transition: opacity .2s ease-in;
vertical-align: baseline;
&:hover {
@include transition (color .2s ease-in);
color: $green-taiga;
transition: color .2s ease-in;
}
}
.number {
@ -138,9 +138,9 @@
text-align: left;
width: 100%;
&:hover {
@include transition (background .2s ease-in);
background: lighten($gray-light, 12%);
cursor: move;
transition: background .2s ease-in;
}
&:last-child {
border-bottom: 0;
@ -150,9 +150,9 @@
height: 40px;
}
&.ui-sortable-helper {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%);
box-shadow: 1px 1px 10px rgba($black, .1);
transition: background .2s ease-in;
}
}
@ -209,16 +209,16 @@
.sprint-old-open {
.sprint-name {
.icon-arrow-up {
@include transform(rotate(180deg));
@include transition (all .2s linear);
transform: rotate(180deg);
transition: all .2s linear;
vertical-align: baseline;
&.active {
@include transform(rotate(0));
@include transition (all .2s linear);
transform: rotate(0);
transition: all .2s linear;
}
&:hover {
@include transition(color .2s linear);
color: $fresh-taiga;
transition: color .2s linear;
}
}
}
@ -231,16 +231,16 @@
}
.sprint-name {
.icon-arrow-up {
@include transform(rotate(180deg));
@include transition (all .2s linear);
transform: rotate(180deg);
transition: all .2s linear;
vertical-align: baseline;
&.active {
@include transform(rotate(0));
@include transition (all .2s linear);
transform: rotate(0);
transition: all .2s linear;
}
&:hover {
@include transition(color .2s linear);
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 {
@include table-flex(flex-start);
@include flex-direction(row);
flex-direction: row;
}
.avatar-task-link {
display: block;
@ -57,12 +57,12 @@ $column-margin: 0 10px 0 0;
position: absolute;
}
.task-colum-name {
@extend %large;
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
@include table-flex();
@include justify-content(space-between);
@extend %large;
background: $whitish;
border-top: 3px solid $gray-light;
justify-content: space-between;
margin: $column-margin;
max-width: $column-width;
padding: .5rem 1rem;
@ -74,21 +74,21 @@ $column-margin: 0 10px 0 0;
}
.icon {
@extend %medium;
@include transition(color .2s linear);
color: $gray-light;
margin-right: .3rem;
transition: color .2s linear;
&:hover {
color: $green-taiga;
}
&.hfold,
&.hunfold {
@include transform(rotate(90deg));
display: inline-block;
transform: rotate(90deg);
}
}
&.column-fold {
@include align-items(center);
@include justify-content(center);
align-items: center;
justify-content: center;
padding: .3rem 0;
span {
display: none;
@ -134,8 +134,8 @@ $column-margin: 0 10px 0 0;
width: 100%;
&:hover {
.new-task {
@include transition(opacity .3s linear);
opacity: 1;
transition: opacity .3s linear;
}
}
&.blocked {
@ -144,11 +144,11 @@ $column-margin: 0 10px 0 0;
border-radius: 3px;
a,
.points-value {
@include transition(color .3s linear);
color: rgba($white, .9);
transition: color .3s linear;
&:hover {
@include transition(color .3s linear);
color: rgba($white, 1);
transition: color .3s linear;
}
}
}
@ -177,11 +177,11 @@ $column-margin: 0 10px 0 0;
.taskboard-userstory-box {
padding: .5rem .5rem .5rem 1.5rem;
.icon {
@include transition(color .2s linear);
color: $gray-light;
position: absolute;
right: .5rem;
top: .7rem;
transition: color .2s linear;
&:hover {
color: $green-taiga;
}
@ -230,13 +230,13 @@ $column-margin: 0 10px 0 0;
margin-left: .5rem;
&:hover {
span {
@include transition (opacity .2s linear);
opacity: 1;
transition: opacity .2s linear;
}
}
}
span {
@include transition (opacity .2s linear);
opacity: 0;
transition: opacity .2s linear;
}
}

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

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

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

@ -20,8 +20,8 @@
color: $grayer;
cursor: pointer;
&:hover {
@include transition (color .2s ease-in);
color: $green-taiga;
transition: color .2s ease-in;
}
}
}
@ -36,15 +36,15 @@
&:hover {
.attachment-settings {
.settings {
@include transition (opacity .2s ease-in);
opacity: 1;
transition: opacity .2s ease-in;
}
}
}
&.ui-sortable-helper {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%);
box-shadow: 1px 1px 10px rgba($black, .1);
transition: background .2s ease-in;
}
&.deprecated {
color: $gray-light;
@ -157,8 +157,8 @@
margin-left: .5rem;
}
&:hover {
@include transition (background .2s ease-in);
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;
}
.resume {
@include display(flex);
@include align-items(space-between);
align-items: space-between;
cursor: pointer;
display: flex;
padding: 1rem;
position: relative;
}
@ -19,7 +19,7 @@
padding-right: 5px;
}
.summary-role {
@include flex(1);
flex: 1;
width: 280px;
.role-summary-single {
background: $gray-light;
@ -36,8 +36,8 @@
}
}
.icon {
@include flex(1);
@extend %xlarge;
flex: 1;
text-align: right;
}
.category-items {
@ -49,10 +49,10 @@
}
}
.category-item {
@include display(flex);
@include justify-content(space-between);
@include align-items(center);
align-items: center;
border-bottom: 1px solid $very-light-gray;
display: flex;
justify-content: space-between;
padding: .5rem .5rem .5rem 2rem;
&:last-child {
border-bottom: 0;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -12,15 +12,15 @@
@extend %title;
opacity: .2;
&:hover {
@include transition (opacity .3s linear);
color: $blackish;
opacity: 1;
transition: opacity .3s linear;
}
}
.active {
@include transition (opacity .3s linear);
color: $blackish;
opacity: 1;
transition : opacity .3s linear;
}
.icon {
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);
padding: .5rem;
&:hover {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%);
transition: background .2s ease-in;
}
.user-stories {
@include table-flex-child(5, 0, 1);
@ -27,8 +27,8 @@
}
}
.row-selected {
@include transition (background .2s ease-in);
background: lighten($green-taiga, 60%);
transition: background .2s ease-in;
}
// TODO: refactor xaviju
@ -47,8 +47,8 @@
@extend %medium;
color: $gray-light;
&:hover {
@include transition (color .3s linear);
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;
&:hover,
&.active {
@include transition (color .3s linear);
color: $green-taiga;
transition : color .3s linear;
.icon {
@include transition (opacity .3s linear);
opacity: 1;
transition : opacity .3s linear;
}
}
}
.active {
@include transition (opacity .3s linear);
opacity: 1;
transition : opacity .3s linear;
}
.icon {
color: $blackish;

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

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

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

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

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

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

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

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

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

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

4
gulpfile.coffee
View File

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

1
package.json
View File

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