diff --git a/app/styles/components/buttons.scss b/app/styles/components/buttons.scss index 28348313..67d55b3c 100755 --- a/app/styles/components/buttons.scss +++ b/app/styles/components/buttons.scss @@ -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; } } diff --git a/app/styles/components/filter.scss b/app/styles/components/filter.scss index dac49854..1e4bc16a 100644 --- a/app/styles/components/filter.scss +++ b/app/styles/components/filter.scss @@ -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; } } } diff --git a/app/styles/components/help-notion-button.scss b/app/styles/components/help-notion-button.scss index 215e0631..528c8f63 100644 --- a/app/styles/components/help-notion-button.scss +++ b/app/styles/components/help-notion-button.scss @@ -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; } } diff --git a/app/styles/components/kanban-task.scss b/app/styles/components/kanban-task.scss index a1d4bef0..83dbe4b1 100644 --- a/app/styles/components/kanban-task.scss +++ b/app/styles/components/kanban-task.scss @@ -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; diff --git a/app/styles/components/loader.scss b/app/styles/components/loader.scss index c29a619e..2f34f661 100644 --- a/app/styles/components/loader.scss +++ b/app/styles/components/loader.scss @@ -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 { diff --git a/app/styles/components/loading-bar.scss b/app/styles/components/loading-bar.scss index 3bc23dcd..65941a21 100644 --- a/app/styles/components/loading-bar.scss +++ b/app/styles/components/loading-bar.scss @@ -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; } } diff --git a/app/styles/components/markdown-help.scss b/app/styles/components/markdown-help.scss index c3577a8a..36ad3ea3 100644 --- a/app/styles/components/markdown-help.scss +++ b/app/styles/components/markdown-help.scss @@ -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 { diff --git a/app/styles/components/markitup.scss b/app/styles/components/markitup.scss index eb70f415..ebb6e881 100644 --- a/app/styles/components/markitup.scss +++ b/app/styles/components/markitup.scss @@ -8,8 +8,8 @@ a { opacity: .8; &:hover { - @include transition(opacity .2s linear); opacity: .3; + transition: opacity .2s linear; } } } diff --git a/app/styles/components/notification-message.scss b/app/styles/components/notification-message.scss index e708dede..40b6840d 100644 --- a/app/styles/components/notification-message.scss +++ b/app/styles/components/notification-message.scss @@ -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; diff --git a/app/styles/components/paginator.scss b/app/styles/components/paginator.scss index 5cac3004..ac064071 100644 --- a/app/styles/components/paginator.scss +++ b/app/styles/components/paginator.scss @@ -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; } } diff --git a/app/styles/components/summary.scss b/app/styles/components/summary.scss index 16de17b8..318bdec2 100644 --- a/app/styles/components/summary.scss +++ b/app/styles/components/summary.scss @@ -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; } } } diff --git a/app/styles/components/taskboard-task.scss b/app/styles/components/taskboard-task.scss index efe4013d..73a20f8d 100644 --- a/app/styles/components/taskboard-task.scss +++ b/app/styles/components/taskboard-task.scss @@ -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 { diff --git a/app/styles/components/watchers.scss b/app/styles/components/watchers.scss index a078792c..247f30fd 100644 --- a/app/styles/components/watchers.scss +++ b/app/styles/components/watchers.scss @@ -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; } } } diff --git a/app/styles/dependencies/helpers.scss b/app/styles/dependencies/helpers.scss index 79ae56fd..1fafbc13 100644 --- a/app/styles/dependencies/helpers.scss +++ b/app/styles/dependencies/helpers.scss @@ -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 { diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss index 28ce7fc5..88ebfaf3 100644 --- a/app/styles/dependencies/mixins.scss +++ b/app/styles/dependencies/mixins.scss @@ -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}; } } diff --git a/app/styles/layout/animation.scss b/app/styles/layout/animation.scss index 6781c449..5981239f 100644 --- a/app/styles/layout/animation.scss +++ b/app/styles/layout/animation.scss @@ -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; } } diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss index 8c9cd4e2..9a0cd994 100644 --- a/app/styles/layout/base.scss +++ b/app/styles/layout/base.scss @@ -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; diff --git a/app/styles/layout/elements.scss b/app/styles/layout/elements.scss index c545653b..7bf3788b 100644 --- a/app/styles/layout/elements.scss +++ b/app/styles/layout/elements.scss @@ -40,7 +40,7 @@ sup { } .icon-spinner { - @include animation (spin 1s linear infinite); + animation: spin 1s linear infinite; } .clickable { diff --git a/app/styles/layout/invitation.scss b/app/styles/layout/invitation.scss index 59b7d0c2..84e81040 100644 --- a/app/styles/layout/invitation.scss +++ b/app/styles/layout/invitation.scss @@ -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 { diff --git a/app/styles/layout/issues.scss b/app/styles/layout/issues.scss index 2095adb2..0d7d3317 100644 --- a/app/styles/layout/issues.scss +++ b/app/styles/layout/issues.scss @@ -1,6 +1,6 @@ .issues { .filters-bar { - @include flex(1); + flex: 1; width: 210px; } .filters-inner { diff --git a/app/styles/layout/login.scss b/app/styles/layout/login.scss index 781190aa..84f164ee 100644 --- a/app/styles/layout/login.scss +++ b/app/styles/layout/login.scss @@ -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 @@ } } } - diff --git a/app/styles/layout/not-found.scss b/app/styles/layout/not-found.scss index 7c00b74f..3959acf9 100644 --- a/app/styles/layout/not-found.scss +++ b/app/styles/layout/not-found.scss @@ -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 { diff --git a/app/styles/layout/typography.scss b/app/styles/layout/typography.scss index f58d1ef3..700c5959 100755 --- a/app/styles/layout/typography.scss +++ b/app/styles/layout/typography.scss @@ -93,8 +93,8 @@ a:visited { color: $grayer; text-decoration: none; &:hover { - @include transition (color .3s linear); color: $green-taiga; + transition: color .3s linear; } } diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss index e2a39843..bc0897d6 100644 --- a/app/styles/layout/us-detail.scss +++ b/app/styles/layout/us-detail.scss @@ -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; } } } diff --git a/app/styles/layout/wiki.scss b/app/styles/layout/wiki.scss index 05ead45c..9bb55308 100644 --- a/app/styles/layout/wiki.scss +++ b/app/styles/layout/wiki.scss @@ -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 { diff --git a/app/styles/modules/admin/admin-common.scss b/app/styles/modules/admin/admin-common.scss index 13756fe2..dbedf557 100644 --- a/app/styles/modules/admin/admin-common.scss +++ b/app/styles/modules/admin/admin-common.scss @@ -16,8 +16,8 @@ padding: 1rem; &:hover { .edit-value { - @include transition(opacity .3s linear); opacity: 1; + transition: opacity .3s linear; } } } diff --git a/app/styles/modules/admin/admin-functionalities.scss b/app/styles/modules/admin/admin-functionalities.scss index 19be0b10..ec73d682 100644 --- a/app/styles/modules/admin/admin-functionalities.scss +++ b/app/styles/modules/admin/admin-functionalities.scss @@ -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) { diff --git a/app/styles/modules/admin/admin-membership-table.scss b/app/styles/modules/admin/admin-membership-table.scss index adbadf9d..be6c7557 100644 --- a/app/styles/modules/admin/admin-membership-table.scss +++ b/app/styles/modules/admin/admin-membership-table.scss @@ -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; diff --git a/app/styles/modules/admin/admin-menu.scss b/app/styles/modules/admin/admin-menu.scss index 99ab5cbf..02e12c55 100644 --- a/app/styles/modules/admin/admin-menu.scss +++ b/app/styles/modules/admin/admin-menu.scss @@ -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; diff --git a/app/styles/modules/admin/admin-roles.scss b/app/styles/modules/admin/admin-roles.scss index 07805b18..757e4f23 100644 --- a/app/styles/modules/admin/admin-roles.scss +++ b/app/styles/modules/admin/admin-roles.scss @@ -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; diff --git a/app/styles/modules/admin/admin-submenu-roles.scss b/app/styles/modules/admin/admin-submenu-roles.scss index f2cd8e61..b43cc4bb 100644 --- a/app/styles/modules/admin/admin-submenu-roles.scss +++ b/app/styles/modules/admin/admin-submenu-roles.scss @@ -20,8 +20,8 @@ &:hover { color: $blackish; .icon { - @include transition (opacity .3s linear); opacity: 1; + transition: opacity .3s linear; } } } diff --git a/app/styles/modules/admin/admin-submenu.scss b/app/styles/modules/admin/admin-submenu.scss index 853ee5ce..a8524778 100644 --- a/app/styles/modules/admin/admin-submenu.scss +++ b/app/styles/modules/admin/admin-submenu.scss @@ -20,8 +20,8 @@ &:hover { color: $blackish; .icon { - @include transition (opacity .3s linear); opacity: 1; + transition: opacity .3s linear; } } } diff --git a/app/styles/modules/admin/project-values.scss b/app/styles/modules/admin/project-values.scss index 787e6382..5504d08d 100644 --- a/app/styles/modules/admin/project-values.scss +++ b/app/styles/modules/admin/project-values.scss @@ -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; } diff --git a/app/styles/modules/admin/third-parties.scss b/app/styles/modules/admin/third-parties.scss index ede1fad1..5cb815cc 100644 --- a/app/styles/modules/admin/third-parties.scss +++ b/app/styles/modules/admin/third-parties.scss @@ -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; } } } diff --git a/app/styles/modules/auth/change-password-from-recovery.scss b/app/styles/modules/auth/change-password-from-recovery.scss index 6558c750..f35cb4f2 100644 --- a/app/styles/modules/auth/change-password-from-recovery.scss +++ b/app/styles/modules/auth/change-password-from-recovery.scss @@ -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; } } } diff --git a/app/styles/modules/auth/login-form.scss b/app/styles/modules/auth/login-form.scss index 80b88cc1..1a29f91d 100644 --- a/app/styles/modules/auth/login-form.scss +++ b/app/styles/modules/auth/login-form.scss @@ -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 { diff --git a/app/styles/modules/backlog/backlog-table.scss b/app/styles/modules/backlog/backlog-table.scss index 81d885aa..3fe6fdc0 100644 --- a/app/styles/modules/backlog/backlog-table.scss +++ b/app/styles/modules/backlog/backlog-table.scss @@ -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 { diff --git a/app/styles/modules/backlog/sprints.scss b/app/styles/modules/backlog/sprints.scss index e56b4e64..6df29f09 100644 --- a/app/styles/modules/backlog/sprints.scss +++ b/app/styles/modules/backlog/sprints.scss @@ -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; } } } diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss index c2a35a58..144591cb 100644 --- a/app/styles/modules/backlog/taskboard-table.scss +++ b/app/styles/modules/backlog/taskboard-table.scss @@ -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; } } diff --git a/app/styles/modules/common/assigned-to.scss b/app/styles/modules/common/assigned-to.scss index 4f8171c8..2b1f2085 100644 --- a/app/styles/modules/common/assigned-to.scss +++ b/app/styles/modules/common/assigned-to.scss @@ -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; diff --git a/app/styles/modules/common/attachments.scss b/app/styles/modules/common/attachments.scss index a19ef7d4..e14a2eda 100644 --- a/app/styles/modules/common/attachments.scss +++ b/app/styles/modules/common/attachments.scss @@ -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; } } diff --git a/app/styles/modules/common/category-config.scss b/app/styles/modules/common/category-config.scss index 0eac6075..ca7b4844 100644 --- a/app/styles/modules/common/category-config.scss +++ b/app/styles/modules/common/category-config.scss @@ -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; diff --git a/app/styles/modules/common/colors-table.scss b/app/styles/modules/common/colors-table.scss index dbf4a42c..c188f54e 100644 --- a/app/styles/modules/common/colors-table.scss +++ b/app/styles/modules/common/colors-table.scss @@ -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; } } } diff --git a/app/styles/modules/common/external-reference.scss b/app/styles/modules/common/external-reference.scss index c69ed1b7..7c6c2f43 100644 --- a/app/styles/modules/common/external-reference.scss +++ b/app/styles/modules/common/external-reference.scss @@ -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; } diff --git a/app/styles/modules/common/history.scss b/app/styles/modules/common/history.scss index 62a43676..b2c7bb33 100644 --- a/app/styles/modules/common/history.scss +++ b/app/styles/modules/common/history.scss @@ -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 { diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss index 5f71b8c9..3038993f 100644 --- a/app/styles/modules/common/lightbox.scss +++ b/app/styles/modules/common/lightbox.scss @@ -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 { diff --git a/app/styles/modules/common/nav.scss b/app/styles/modules/common/nav.scss index 37b32b12..c5770e63 100644 --- a/app/styles/modules/common/nav.scss +++ b/app/styles/modules/common/nav.scss @@ -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; } } } diff --git a/app/styles/modules/common/projects-nav.scss b/app/styles/modules/common/projects-nav.scss index b8e62c6f..867f2c45 100644 --- a/app/styles/modules/common/projects-nav.scss +++ b/app/styles/modules/common/projects-nav.scss @@ -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 { diff --git a/app/styles/modules/common/related-tasks.scss b/app/styles/modules/common/related-tasks.scss index b7c8b087..0263f448 100644 --- a/app/styles/modules/common/related-tasks.scss +++ b/app/styles/modules/common/related-tasks.scss @@ -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; diff --git a/app/styles/modules/common/wizard.scss b/app/styles/modules/common/wizard.scss index 7708d638..bc2df2e4 100644 --- a/app/styles/modules/common/wizard.scss +++ b/app/styles/modules/common/wizard.scss @@ -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%; diff --git a/app/styles/modules/filters/filters.scss b/app/styles/modules/filters/filters.scss index 15c5d023..37412981 100644 --- a/app/styles/modules/filters/filters.scss +++ b/app/styles/modules/filters/filters.scss @@ -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; } } diff --git a/app/styles/modules/filters/list-filters.scss b/app/styles/modules/filters/list-filters.scss index 29753c6c..dc8ce2a2 100644 --- a/app/styles/modules/filters/list-filters.scss +++ b/app/styles/modules/filters/list-filters.scss @@ -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; diff --git a/app/styles/modules/home-projects-list.scss b/app/styles/modules/home-projects-list.scss index 66fd5d6f..c8d7ebb5 100644 --- a/app/styles/modules/home-projects-list.scss +++ b/app/styles/modules/home-projects-list.scss @@ -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; } } } diff --git a/app/styles/modules/issues/issues-table.scss b/app/styles/modules/issues/issues-table.scss index 34d642f4..29af15f0 100644 --- a/app/styles/modules/issues/issues-table.scss +++ b/app/styles/modules/issues/issues-table.scss @@ -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 { diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss index 5c3146c2..ef5f1f52 100644 --- a/app/styles/modules/kanban/kanban-table.scss +++ b/app/styles/modules/kanban/kanban-table.scss @@ -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); } } } diff --git a/app/styles/modules/search/search-filter.scss b/app/styles/modules/search/search-filter.scss index b9aa3314..0e1a07c4 100644 --- a/app/styles/modules/search/search-filter.scss +++ b/app/styles/modules/search/search-filter.scss @@ -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; diff --git a/app/styles/modules/search/search-result-table.scss b/app/styles/modules/search/search-result-table.scss index 3abe6471..611c0ba2 100644 --- a/app/styles/modules/search/search-result-table.scss +++ b/app/styles/modules/search/search-result-table.scss @@ -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; } } } diff --git a/app/styles/modules/team/team-filters.scss b/app/styles/modules/team/team-filters.scss index 3b09364a..cf23aa0d 100644 --- a/app/styles/modules/team/team-filters.scss +++ b/app/styles/modules/team/team-filters.scss @@ -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; diff --git a/app/styles/modules/team/team-table.scss b/app/styles/modules/team/team-table.scss index d05e4435..01f8f706 100644 --- a/app/styles/modules/team/team-table.scss +++ b/app/styles/modules/team/team-table.scss @@ -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; } } } diff --git a/app/styles/modules/user-settings/mail-notifications-table.scss b/app/styles/modules/user-settings/mail-notifications-table.scss index f4bb4913..762b7fe5 100644 --- a/app/styles/modules/user-settings/mail-notifications-table.scss +++ b/app/styles/modules/user-settings/mail-notifications-table.scss @@ -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; } } } diff --git a/app/styles/modules/user-settings/user-profile.scss b/app/styles/modules/user-settings/user-profile.scss index 21c1a219..7184d462 100644 --- a/app/styles/modules/user-settings/user-profile.scss +++ b/app/styles/modules/user-settings/user-profile.scss @@ -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; diff --git a/app/styles/modules/wiki/wiki-nav.scss b/app/styles/modules/wiki/wiki-nav.scss index ab827711..78f9f928 100644 --- a/app/styles/modules/wiki/wiki-nav.scss +++ b/app/styles/modules/wiki/wiki-nav.scss @@ -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; } } } diff --git a/app/styles/modules/wiki/wiki-summary.scss b/app/styles/modules/wiki/wiki-summary.scss index 936718ae..7d83451f 100644 --- a/app/styles/modules/wiki/wiki-summary.scss +++ b/app/styles/modules/wiki/wiki-summary.scss @@ -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; diff --git a/gulpfile.coffee b/gulpfile.coffee index 0d1da3df..dd3341a8 100644 --- a/gulpfile.coffee +++ b/gulpfile.coffee @@ -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) -> diff --git a/package.json b/package.json index e53d88d2..2082e368 100644 --- a/package.json +++ b/package.json @@ -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",