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

Merge pull request #256 from taigaio/us/1879/sass-coherence 

Removed flexbox mixins to vanilla CSS
stable
Juanfran 2015-01-20 15:25:27 +01:00
parent faeddddac0 e9dbb8a155
commit 48b68e42af
44 changed files with 519 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/partials/views/modules/wizard-create-project.jade
View File

@ -21,6 +21,8 @@ form
div.title div.title
h1 Create Project h1 Create Project
p Fresh and clean. So exciting! p Fresh and clean. So exciting!
div.template-wrapper
div.template-inner
fieldset fieldset
input(type="text", name="name", ng-model="data.name", data-required="true", placeholder="Name", maxlength="45") input(type="text", name="name", ng-model="data.name", data-required="true", placeholder="Name", maxlength="45")
fieldset fieldset

11
app/styles/components/basic-table.scss
View File

@ -1,15 +1,20 @@
.basic-table { .basic-table {
@include table-flex(stretch, center, flex, column, wrap, flex-start); display: flex;
flex-direction: column;
width: 100%; width: 100%;
.row { .row {
@include table-flex(stretch, center, flex, row, nowrap, flex-start); align-items: center;
border-bottom: 1px solid darken($whitish, 4%); border-bottom: 1px solid darken($whitish, 4%);
display: flex;
flex-direction: row;
flex-wrap: nowrap;
padding: .3rem 0; padding: .3rem 0;
text-align: left; text-align: left;
width: 100%; width: 100%;
@for $i from 1 through 8 { @for $i from 1 through 8 {
.width-#{$i} { .width-#{$i} {
@include table-flex-child($i, 50px, 0); flex-basis: 50px;
flex-grow: #{$i};
} }
} }
&:last-child { &:last-child {

8
app/styles/components/created-by.scss
View File

@ -1,17 +1,19 @@
.us-created-by { .us-created-by {
@include table-flex(); display: flex;
margin-bottom: 1rem; margin-bottom: 1rem;
margin-top: .5rem; margin-top: .5rem;
position: relative; position: relative;
.user-avatar { .user-avatar {
@include table-flex-child(0, 40px, 0); flex-basis: 40px;
flex-grow: 0;
img { img {
border-radius: 8%; border-radius: 8%;
width: 100%; width: 100%;
} }
} }
.created-by { .created-by {
@include table-flex-child(3, 70px, 0); flex-basis: 70px;
flex-grow: 3;
margin-left: .5rem; margin-left: .5rem;
.created-title, .created-title,
.created-date { .created-date {

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

@ -27,17 +27,17 @@
} }
} }
.kanban-tagline { .kanban-tagline {
@include table-flex();
border-color: $postit-hover; border-color: $postit-hover;
display: flex;
height: .6rem; height: .6rem;
} }
.kanban-tag { .kanban-tag {
@include table-flex-child(1, 0, 0, 0);
border-color: $postit-hover; border-color: $postit-hover;
flex-grow: 1;
height: .6rem; height: .6rem;
} }
.kanban-task-inner { .kanban-task-inner {
@include table-flex(); display: flex;
} }
.avatar { .avatar {
a { a {
@ -69,7 +69,8 @@
} }
.task-text { .task-text {
@extend %small; @extend %small;
@include table-flex-child($flex-grow: 10, $flex-basis: 50px); flex-basis: 50px;
flex-grow: 10;
padding: 0 .5rem 0 .8rem; padding: 0 .5rem 0 .8rem;
word-wrap: break-word; word-wrap: break-word;
} }
@ -126,7 +127,9 @@
} }
} }
.avatar { .avatar {
@include table-flex-child($flex-basis: 50px); flex-basis: 50px;
flex-grow: 1;
width: 55px;
} }
.task-name { .task-name {
word-wrap: break-word; word-wrap: break-word;
@ -188,7 +191,9 @@
} }
} }
.avatar { .avatar {
@include table-flex-child($flex-basis: 40px); flex-basis: 50px;
flex-grow: 1;
width: 55px;
} }
.task-num { .task-num {
vertical-align: top; vertical-align: top;

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

@ -37,8 +37,8 @@
overflow: hidden; overflow: hidden;
} }
a.v-pagination-next, .v-pagination-next,
a.v-pagination-previous { .v-pagination-previous {
background-color: $button-gray; background-color: $button-gray;
color: $whitish; color: $whitish;
display: block; display: block;

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

@ -100,11 +100,11 @@
} }
&.active { &.active {
color: $fresh-taiga; color: $fresh-taiga;
&:hover { }
&.active:hover {
color: $gray; color: $gray;
transition: color .3s linear; transition: color .3s linear;
} }
} }
} }
} }
}

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

@ -32,23 +32,25 @@
} }
} }
.taskboard-tagline { .taskboard-tagline {
@include table-flex();
border-color: $postit-hover; border-color: $postit-hover;
display: flex;
height: .6rem; height: .6rem;
} }
.taskboard-tag { .taskboard-tag {
@include table-flex-child(1, 0, 0, 0);
border-top: .3rem solid $postit-hover; border-top: .3rem solid $postit-hover;
flex-basis: 0;
flex-grow: 1;
height: .6rem; height: .6rem;
z-index: 100; z-index: 100;
} }
.taskboard-task-inner { .taskboard-task-inner {
@include table-flex(); display: flex;
padding: .5rem; padding: .5rem;
} }
.taskboard-user-avatar { .taskboard-user-avatar {
.avatar { flex-basis: 50px;
@include table-flex-child($flex-basis: 50px); flex-grow: 1;
max-width: 55px;
a { a {
@extend %small; @extend %small;
display: block; display: block;
@ -64,19 +66,17 @@
figcaption { figcaption {
color: darken($postit-hover, 15%); color: darken($postit-hover, 15%);
display: none; display: none;
//display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
width: 100%; width: 100%;
} }
} }
&.iocaine { .iocaine {
img { img {
filter: hue-rotate(150deg) saturate(200%); filter: hue-rotate(150deg) saturate(200%);
} }
} }
}
.icon-iocaine { .icon-iocaine {
@extend %large; @extend %large;
background: $black; background: $black;
@ -101,7 +101,8 @@
} }
.taskboard-text { .taskboard-text {
@extend %small; @extend %small;
@include table-flex-child($flex-grow: 10, $flex-basis: 50px); flex-basis: 50px;
flex-grow: 10;
padding: 0 .5rem 0 1rem; padding: 0 .5rem 0 1rem;
word-wrap: break-word; word-wrap: break-word;
} }

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

@ -19,9 +19,12 @@
} }
} }
.watcher-single { .watcher-single {
@include table-flex(center, center, flex, row, wrap, center); align-content: center;
align-items: center;
background: transparent; background: transparent;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
display: flex;
justify-content: center;
padding: .5rem; padding: .5rem;
vertical-align: middle; vertical-align: middle;
&:last-child { &:last-child {
@ -36,13 +39,13 @@
} }
.watcher-name { .watcher-name {
@extend %small; @extend %small;
@include table-flex-child(8, 0);
color: $grayer; color: $grayer;
flex-grow: 8;
margin-left: 1rem; margin-left: 1rem;
position: relative; position: relative;
} }
.watcher-avatar { .watcher-avatar {
@include table-flex-child(1, 0); flex-grow: 1;
} }
.icon-delete { .icon-delete {
opacity: 0; opacity: 0;

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

@ -1,21 +1,3 @@
//Flexbox FTW
%table-flex {
align-content: stretch;
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
%table-flex-child {
flex-basis: 300px;
flex-grow: 1;
flex-shrink: 0;
width: 300px;
}
// __Font Sizes__ // // __Font Sizes__ //
%xsmall {font-size: .5rem;} %xsmall {font-size: .5rem;}
%small {font-size: .8rem;} %small {font-size: .8rem;}
@ -48,7 +30,10 @@
top: 2rem; top: 2rem;
} }
&.open { &.open {
@include table-flex(center, center, flex, row, wrap, center); align-content: center;
align-items: center;
display: flex;
justify-content: center;
opacity: 1; opacity: 1;
transition: opacity .3s ease; transition: opacity .3s ease;
} }

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

@ -5,26 +5,6 @@
text-overflow: ellipsis; text-overflow: ellipsis;
} }
// 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) {
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:'') {
flex: $flex-grow;
flex-basis: $flex-basis;
flex-shrink: $flex-shrink;
width: $flex-basis;
@if #{$width} != null {
width: #{$width};
}
}
@mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) { @mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) {
box-shadow: $h-shadow $v-shadow $blur $spread $color; box-shadow: $h-shadow $v-shadow $blur $spread $color;
} }

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

@ -7,10 +7,7 @@ body {
@extend %text; @extend %text;
background: #fff; // fallback background: #fff; // fallback
color: #444; color: #444;
-webkit-font-smoothing: antialiased; // Fix for webkit renderin
min-height: 100%; min-height: 100%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
width: 100%; width: 100%;
.master { .master {
transition: transform 1s ease; transition: transform 1s ease;

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

@ -1,14 +1,18 @@
.invitation-main { .invitation-main {
@extend %background-taiga; @extend %background-taiga;
@include table-flex(center, center, flex, row, wrap, center); align-content: center;
align-items: center;
bottom: 0; bottom: 0;
justify-content: center;
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
top: 0; top: 0;
z-index: 999; z-index: 999;
.invitation-container { .invitation-container {
@include table-flex-child(0, 650px, 0, 650px); flex-basis: 650px;
flex-grow: 1;
width: 650px;
} }
.logo { .logo {
margin: 1rem auto; margin: 1rem auto;
@ -43,7 +47,7 @@
} }
} }
.invitation-form { .invitation-form {
@include table-flex(); display: flex;
fieldset { fieldset {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
@ -90,9 +94,11 @@
} }
.login-form, .login-form,
.register-form { .register-form {
@include table-flex-child(1, 200px, 0, 200px); flex-basis: 200px;
flex-grow: 1;
padding: 1rem; padding: 1rem;
text-align: center; text-align: center;
width: 200px;
.form-header { .form-header {
color: #999; color: #999;
} }

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

@ -1,6 +1,5 @@
.login-main { .login-main {
@extend %triangled-bg; @extend %triangled-bg;
//@include table-flex(center, center, flex, row, wrap, center);
align-items: center; align-items: center;
bottom: 0; bottom: 0;
display: flex; display: flex;

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

@ -20,50 +20,55 @@
.us-name, .us-name,
.us-related-task { .us-related-task {
color: $white; color: $white;
}
a { a {
color: $white; color: $white;
transition: color .3s linear; transition: color .3s linear;
&:hover { }
a:hover {
color: $red-light; color: $red-light;
} }
}
}
.unblock { .unblock {
@extend %bold; @extend %bold;
color: $white; color: $white;
float: right; float: right;
&:hover { }
.unblock:hover {
color: $red-light; color: $red-light;
transition: color .3s linear; transition: color .3s linear;
} }
} }
.issue-nav {
a {
color: $white;
}
}
}
p { p {
margin-bottom: 0; margin-bottom: 0;
} }
.us-edit-name-inner { .us-edit-name-inner {
@include table-flex(); display: flex;
}
.edit-subject {
align-content: center;
align-items: center;
display: flex;
} }
input { input {
@include table-flex-child(1, 90%, 0);
background: $white; background: $white;
flex-grow: 9;
}
.save-container {
flex-grow: 1;
} }
.us-title-text { .us-title-text {
align-content: center;
align-items: center;
display: flex; display: flex;
margin-bottom: 0; margin-bottom: 0;
max-width: 94%; max-width: 94%;
&:hover { }
.us-title-text:hover {
.icon-edit { .icon-edit {
opacity: 1; opacity: 1;
transition: opacity .3s linear; transition: opacity .3s linear;
} }
} }
}
.us-number { .us-number {
@extend %xlarge; @extend %xlarge;
@extend %title; @extend %title;
@ -98,14 +103,14 @@
border-left: 1px solid $gray-light; border-left: 1px solid $gray-light;
padding: 0 .2rem; padding: 0 .2rem;
transition: color .3s linear; transition: color .3s linear;
&:hover { }
a:hover {
color: $green-taiga; color: $green-taiga;
} }
&:first-child { a:first-child {
border: 0; border: 0;
} }
} }
}
.block-desc-container { .block-desc-container {
@extend %small; @extend %small;
} }
@ -162,12 +167,12 @@
.editable { .editable {
background: $whitish; background: $whitish;
cursor: pointer; cursor: pointer;
}
.no-description { .no-description {
color: $grayer; color: $grayer;
} }
} }
} }
}
&.wysiwyg { &.wysiwyg {
overflow: visible; overflow: visible;
} }
@ -252,17 +257,19 @@
} }
.points-per-role { .points-per-role {
@include table-flex(); display: flex;
position: relative; position: relative;
> li { > li {
@include table-flex-child(1, 18%, 0);
border-right: 1px solid rgba($grayer, .3); border-right: 1px solid rgba($grayer, .3);
color: rgba($grayer, .3); color: rgba($grayer, .3);
display: inline-block; display: inline-block;
flex-basis: 18%;
flex-grow: 1;
margin: .5rem .1rem; margin: .5rem .1rem;
position: relative; position: relative;
text-align: center; text-align: center;
transition: color .3s linear; transition: color .3s linear;
width: 18%;
&.active { &.active {
color: rgba($green-taiga, 1); color: rgba($green-taiga, 1);
} }

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

@ -2,37 +2,36 @@
form { form {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%;
} }
.functionality { .functionality {
@include table-flex(center, center, flex, column, wrap, center); align-content: center;
align-items: center;
background-color: $whitish; background-color: $whitish;
display: inline-block; display: flex;
flex-direction: column;
justify-content: center;
margin-bottom: .3rem; margin-bottom: .3rem;
margin-right: .3rem; margin-right: .3rem;
min-height: 14px;
opacity: .5; opacity: .5;
padding: 1rem; padding: 1rem;
position: relative; position: relative;
transition: all .2s linear; transition: all .2s linear;
vertical-align: top; vertical-align: top;
width: 32%; width: 32%;
&:nth-child(3n+1) {
margin-right: 0;
}
&.active { &.active {
background-color: #e9f0da; background-color: #e9f0da;
opacity: 1; opacity: 1;
} }
.icon { .icon {
@extend %xxlarge; @extend %xxlarge;
@include table-flex-child(1, 120px, 0, 100%); flex-basis: 60px;
flex-grow: 1;
margin: 0 auto; margin: 0 auto;
min-height: 60px; min-height: 60px;
text-align: center;
} }
.desc { .desc {
@include table-flex-child(1 , 0, 0, 100%); flex-grow: 1;
text-align: center;
} }
.activate-input { .activate-input {
display: none; display: none;
@ -44,11 +43,8 @@
} }
} }
span { span {
font-weight: bold; @extend %bold;
} display: block;
p {
margin-bottom: 1rem;
min-height: 4.5rem;
} }
select { select {
margin-top: 1rem; margin-top: 1rem;

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

@ -3,7 +3,9 @@
@extend %bold; @extend %bold;
} }
.avatar { .avatar {
@include table-flex(stretch, center, flex, row, wrap, flex-start); align-items: center;
display: flex;
justify-content: flex-start;
figcaption { figcaption {
margin-left: 1rem; margin-left: 1rem;
width: 75%; width: 75%;
@ -15,7 +17,8 @@
} }
} }
img { img {
@include table-flex-child(1, 35px, 0); flex-basis: 35px;
flex-grow: 1;
max-width: 35px; max-width: 35px;
} }
.name, .name,
@ -38,7 +41,9 @@
padding-right: 1rem; padding-right: 1rem;
} }
.row-status { .row-status {
@include table-flex($justify-content: space-between, $align-items: center); align-items: center;
display: flex;
justify-content: space-between;
} }
.active, .active,
.pending { .pending {
@ -78,17 +83,20 @@
.row-role, .row-role,
.header-member, .header-member,
.header-role { .header-role {
@include table-flex-child(3, 0, 0); flex-basis: 210px;
flex-grow: 3;
min-width: 210px; min-width: 210px;
} }
.row-admin, .row-admin,
.header-admin { .header-admin {
@include table-flex-child(1, 0, 0); flex-basis: 0;
flex-grow: 1;
min-width: 70px; min-width: 70px;
} }
.row-status, .row-status,
.header-status { .header-status {
@include table-flex-child(1, 50px, 0); flex-basis: 50px;
flex-grow: 1;
} }
.check { .check {
background-color: darken($whitish, 10%); background-color: darken($whitish, 10%);
@ -98,7 +106,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 65px; width: 65px;
input[type=checkbox] { input {
cursor: pointer; cursor: pointer;
height: 500px; height: 500px;
left: -10px; left: -10px;
@ -129,7 +137,7 @@
opacity: .6; opacity: .6;
} }
} }
input[type=checkbox]:checked { input:checked {
+ div { + div {
background-color: #74a218; background-color: #74a218;
margin-left: 50%; margin-left: 50%;

11
app/styles/modules/admin/admin-project-profile.scss
View File

@ -3,7 +3,7 @@
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
} }
input[type="text"], input,
textarea { textarea {
@extend %title; @extend %title;
} }
@ -19,10 +19,11 @@
height: 10rem; height: 10rem;
} }
.privacy-settings { .privacy-settings {
@include table-flex(); display: flex;
margin-bottom: 2rem; margin-bottom: 2rem;
div { div {
@include table-flex-child(1, 0, 0, 40%); flex-basis: 0;
flex-grow: 1;
&:first-child { &:first-child {
margin-right: .5rem; margin-right: .5rem;
} }
@ -36,14 +37,12 @@
text-align: center; text-align: center;
} }
input { input {
&:checked { &:checked+label {
+label {
background: $fresh-taiga; background: $fresh-taiga;
color: $white; color: $white;
} }
} }
} }
}
.button-green { .button-green {
color: $white; color: $white;
display: block; display: block;

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

@ -13,7 +13,7 @@
transition: opacity .3s linear; transition: opacity .3s linear;
} }
.edit-role { .edit-role {
@include table-flex(stretch, left, center, row, wrap); align-items: left;
background-color: $whitish; background-color: $whitish;
display: none; display: none;
margin-bottom: 1rem; margin-bottom: 1rem;
@ -55,7 +55,7 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
width: 65px; width: 65px;
input[type=checkbox] { input {
cursor: pointer; cursor: pointer;
height: 500px; height: 500px;
left: -10px; left: -10px;
@ -86,7 +86,7 @@
opacity: .6; opacity: .6;
} }
} }
input[type=checkbox]:checked { input:checked {
+ div { + div {
background-color: #74a218; background-color: #74a218;
margin-left: 50%; margin-left: 50%;

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

@ -1,6 +1,8 @@
.project-values-row { .project-values-row {
@include table-flex(stretch, center, flex, row, wrap, center); align-items: center;
border-bottom: 1px solid $whitish; border-bottom: 1px solid $whitish;
display: flex;
justify-content: center;
padding: 1rem; padding: 1rem;
div { div {
margin-left: 1rem; margin-left: 1rem;
@ -36,10 +38,12 @@
} }
.project-values-name { .project-values-name {
@include table-flex-child(3, 0, 0); flex-basis: 0;
flex-grow: 3;
} }
.project-values-value { .project-values-value {
@include table-flex-child(1, 0, 0); flex-basis: 0;
flex-grow: 1;
.checksley-error-list { .checksley-error-list {
left: 0; left: 0;
right: auto; right: auto;
@ -50,7 +54,8 @@
.project-values-isclosed, .project-values-isclosed,
.project-values-settings { .project-values-settings {
@include table-flex-child(1, 0, 0); flex-basis: 0;
flex-grow: 1;
text-align: right; text-align: right;
} }

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

@ -4,7 +4,7 @@
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
} }
input[type="text"], input,
textarea { textarea {
@extend %title; @extend %title;
} }

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

@ -1,6 +1,7 @@
.backlog-table-header, .backlog-table-header,
.backlog-table-body { .backlog-table-body {
@include table-flex(); display: flex;
flex-direction: column;
width: 100%; width: 100%;
&.show-tags { &.show-tags {
.tags-block { .tags-block {
@ -9,8 +10,8 @@
} }
.row { .row {
@extend %small; @extend %small;
@include table-flex();
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
display: flex;
padding: .5rem 0 .5rem .5rem; padding: .5rem 0 .5rem .5rem;
text-align: left; text-align: left;
width: 100%; width: 100%;
@ -26,10 +27,12 @@
} }
.status { .status {
@include table-flex-child(0, 150px, 0); flex-basis: 150px;
flex-grow: 0;
} }
.points { .points {
@include table-flex-child(0, 125px, 0); flex-basis: 125px;
flex-grow: 0;
} }
} }
@ -136,31 +139,28 @@
transition: background .2s ease-in; transition: background .2s ease-in;
} }
.points { .points {
.not-clickable { .not-clickable:hover {
&:hover {
color: $black; color: $black;
cursor: text; cursor: text;
} }
} }
} }
}
.row-selected { .row-selected {
background: lighten($green-taiga, 60%); background: lighten($green-taiga, 60%);
transition: background .2s ease-in; transition: background .2s ease-in;
} }
.user-story-name { .user-story-name {
@include table-flex($flex-wrap: nowrap); display: flex;
flex-wrap: nowrap;
input { input {
flex-shrink: 0; flex-shrink: 0;
margin-right: 1rem; margin-right: 1rem;
vertical-align: super; vertical-align: super;
&:checked { &:checked+a {
+a {
color: $fresh-taiga; color: $fresh-taiga;
transition: color .2s ease-in; transition: color .2s ease-in;
} }
} }
}
a { a {
display: inline-block; display: inline-block;
flex-grow: 20; flex-grow: 20;

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

@ -90,16 +90,16 @@
margin-top: 5px; margin-top: 5px;
} }
.sprint-summary { .sprint-summary {
@include table-flex(); display: flex;
} }
.sprint-date { .sprint-date {
@extend %large; @extend %large;
@extend %title; @extend %title;
@include table-flex-child(1, 0, 0);
color: $gray-light; color: $gray-light;
flex-flow: 1;
} }
.sprint-points { .sprint-points {
@include table-flex-child(1, 0, 0); flex-grow: 1;
} }
ul { ul {
float: right; float: right;
@ -132,8 +132,8 @@
} }
.sprint-table { .sprint-table {
.row { .row {
@include table-flex();
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
display: flex;
padding: .5em 0; padding: .5em 0;
text-align: left; text-align: left;
width: 100%; width: 100%;
@ -158,7 +158,7 @@
} }
.column-us { .column-us {
@extend %small; @extend %small;
@include table-flex-child(3, 0, 0); flex-flow: 3;
padding: 0 4px; padding: 0 4px;
} }
.us-name { .us-name {
@ -172,7 +172,7 @@
} }
} }
.column-points { .column-points {
@include table-flex-child(1, 0, 0); flex-grow: 1;
padding: 0 4px; padding: 0 4px;
text-align: right; text-align: right;
&.closed { &.closed {

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

@ -1,7 +1,7 @@
//Table basic shared vars //Table basic shared vars
$column-width: 300px; $column-width: 300px;
$column-flex: 0; $column-flex: 1;
$column-shrink: 0; $column-shrink: 0;
$column-margin: 0 10px 0 0; $column-margin: 0 10px 0 0;
@ -31,8 +31,9 @@ $column-margin: 0 10px 0 0;
} }
&.task-column, &.task-column,
.task-column { .task-column {
@include table-flex(flex-start); align-content: flex-start;
flex-direction: row; display: flex;
flex-direction: column;
} }
.avatar-task-link { .avatar-task-link {
display: block; display: block;
@ -52,16 +53,18 @@ $column-margin: 0 10px 0 0;
position: relative; position: relative;
width: 100%; width: 100%;
.taskboard-table-inner { .taskboard-table-inner {
@include table-flex(); display: flex;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
} }
.task-colum-name { .task-colum-name {
@extend %large; @extend %large;
@include table-flex();
background: $whitish; background: $whitish;
border-top: 3px solid $gray-light; border-top: 3px solid $gray-light;
flex: auto 0 auto; display: flex;
flex-basis: $column-width;
flex-grow: $column-flex;
flex-shrink: $column-shrink;
justify-content: space-between; justify-content: space-between;
margin: $column-margin; margin: $column-margin;
max-width: $column-width; max-width: $column-width;
@ -93,15 +96,13 @@ $column-margin: 0 10px 0 0;
span { span {
display: none; display: none;
} }
.icon { .hfold,
&.hfold, .hunfold {
&.hunfold {
margin: 0; margin: 0;
} }
} }
} }
} }
}
.taskboard-table-body { .taskboard-table-body {
height: 700px; height: 700px;
@ -109,7 +110,9 @@ $column-margin: 0 10px 0 0;
overflow-y: scroll; overflow-y: scroll;
width: 100%; width: 100%;
.task-column { .task-column {
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); flex-basis: $column-width;
flex-grow: $column-flex;
flex-shrink: $column-shrink;
margin: $column-margin; margin: $column-margin;
max-width: $column-width; max-width: $column-width;
width: $column-width; width: $column-width;
@ -128,7 +131,7 @@ $column-margin: 0 10px 0 0;
} }
} }
.task-row { .task-row {
@include table-flex(); display: flex;
margin-bottom: .5rem; margin-bottom: .5rem;
min-height: 10rem; min-height: 10rem;
width: 100%; width: 100%;
@ -142,23 +145,23 @@ $column-margin: 0 10px 0 0;
.taskboard-userstory-box { .taskboard-userstory-box {
background: rgba($red, .6); background: rgba($red, .6);
border-radius: 3px; border-radius: 3px;
}
a, a,
.points-value { .points-value {
color: rgba($white, .9); color: rgba($white, .9);
transition: color .3s linear; transition: color .3s linear;
&:hover { }
a:hover,
.points-value:hover {
color: rgba($white, 1); color: rgba($white, 1);
transition: color .3s linear; transition: color .3s linear;
} }
}
}
.taskboard-tasks-box { .taskboard-tasks-box {
background: rgba($red, .1); background: rgba($red, .1);
} }
} }
&.row-fold { &.row-fold {
min-height: 0; min-height: 0;
.taskboard-userstory-box {
.us-title { .us-title {
@include ellipsis(100%); @include ellipsis(100%);
} }
@ -169,7 +172,6 @@ $column-margin: 0 10px 0 0;
} }
} }
} }
}
.taskboard-tasks-box { .taskboard-tasks-box {
background: $whitish; background: $whitish;
} }

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

@ -1,5 +1,5 @@
.duty-assigned-to { .duty-assigned-to {
@include table-flex(); display: flex;
margin-top: 1rem; margin-top: 1rem;
position: relative; position: relative;
&:hover { &:hover {
@ -22,14 +22,14 @@
} }
} }
.user-avatar { .user-avatar {
@include table-flex-child(1, 0); flex-grow: 1;
img { img {
border-radius: 8%; border-radius: 8%;
width: 100%; width: 100%;
} }
} }
.assigned-to { .assigned-to {
@include table-flex-child(3, 0); flex-grow: 3;
margin-left: 1rem; margin-left: 1rem;
margin-top: 15px; margin-top: 15px;
.assigned-title { .assigned-title {

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

@ -3,8 +3,11 @@
} }
.attachments-header { .attachments-header {
@include table-flex(space-between, center, flex, row, wrap, space-between); align-content: space-between;
align-items: center;
background: $whitish; background: $whitish;
display: flex;
justify-content: space-between;
padding: .5rem 1rem; padding: .5rem 1rem;
.attachments-title { .attachments-title {
@extend %medium; @extend %medium;
@ -28,9 +31,9 @@
.single-attachment { .single-attachment {
@extend %small; @extend %small;
@include table-flex();
align-items: center; align-items: center;
border-bottom: 1px solid $whitish; border-bottom: 1px solid $whitish;
display: flex;
padding: .5rem 0 .5rem 1rem; padding: .5rem 0 .5rem 1rem;
position: relative; position: relative;
&:hover { &:hover {
@ -59,25 +62,33 @@
.attachment-name { .attachment-name {
@extend %bold; @extend %bold;
@include ellipsis(200px); @include ellipsis(200px);
@include table-flex-child(1, 35%, 0); flex-basis: 35%;
flex-grow: 1;
padding-right: 1rem; padding-right: 1rem;
.icon { .icon {
margin-right: .5rem; margin-right: .5rem;
} }
} }
.attachment-size { .attachment-size {
@include table-flex-child(1, 15%, 0);
color: $gray-light; color: $gray-light;
flex-basis: 15%;
flex-grow: 1;
margin-right: .5rem; margin-right: .5rem;
} }
.attachment-comments { .attachment-comments,
@include table-flex-child(1, 35%, 0); .editable-attachment-comment {
flex-basis: 35%;
flex-grow: 1;
span { span {
color: $gray; color: $gray;
} }
} }
.editable-attachment-comment {
@extend %medium;
}
.attachment-settings { .attachment-settings {
@include table-flex-child(1, 15%, 0); flex-basis: 15%;
flex-grow: 1;
.settings, .settings,
.editable-settings { .editable-settings {
@extend %large; @extend %large;
@ -123,16 +134,14 @@
span { span {
color: $gray-light; color: $gray-light;
} }
input[type="checkbox"] { input {
margin-right: .2rem; margin-right: .2rem;
vertical-align: middle; vertical-align: middle;
&:checked { &:checked+span {
+ span {
color: $grayer; color: $grayer;
} }
} }
} }
}
.percentage { .percentage {
background: rgba($green-taiga, .1); background: rgba($green-taiga, .1);
bottom: 0; bottom: 0;

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

@ -11,7 +11,9 @@
} }
} }
.row { .row {
@include table-flex(stretch, center, flex, row, wrap, center); align-items: center;
display: flex;
justify-content: center;
padding: 1rem; padding: 1rem;
&:hover { &:hover {
.options-column { .options-column {
@ -32,7 +34,8 @@
} }
} }
.color-column { .color-column {
@include table-flex-child(1, 60px, 0); flex-basis: 60px;
flex-grow: 1;
max-width: 100px; max-width: 100px;
position: relative; position: relative;
} }
@ -40,10 +43,12 @@
.is-closed-column, .is-closed-column,
.options-column, .options-column,
.status-wip-limit { .status-wip-limit {
@include table-flex-child(1, 100px, 0); flex-basis: 100px;
flex-grow: 1;
} }
.status-name { .status-name {
@include table-flex-child(6, 150px, 0); flex-basis: 150px;
flex-grow: 6;
padding: 0 10px; padding: 0 10px;
position: relative; position: relative;
span { span {
@ -52,7 +57,8 @@
} }
} }
.status-slug { .status-slug {
@include table-flex-child(6, 150px, 0); flex-basis: 150px;
flex-grow: 6;
padding: 0 10px; padding: 0 10px;
} }
.options-column { .options-column {

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

@ -19,15 +19,16 @@
} }
} }
.change-entry { .change-entry {
@include table-flex;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
display: flex;
padding: .5rem; padding: .5rem;
&:last-child { &:last-child {
border-bottom: 0; border-bottom: 0;
} }
.activity-changed, .activity-changed,
.activity-fromto { .activity-fromto {
@include table-flex-child(1, 50px, 0); flex-basis: 50px;
flex-grow: 1;
} }
.activity-changed { .activity-changed {
@extend %bold; @extend %bold;
@ -108,7 +109,7 @@
opacity: 0; opacity: 0;
} }
} }
a.show-more-comments { .show-more-comments {
@extend %small; @extend %small;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
border-top: 1px solid $gray-light; border-top: 1px solid $gray-light;
@ -148,8 +149,8 @@ a.show-more-comments {
} }
} }
.activity-single { .activity-single {
@include table-flex;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
display: flex;
padding: 2rem 0; padding: 2rem 0;
position: relative; position: relative;
&:hover { &:hover {
@ -212,7 +213,8 @@ a.show-more-comments {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
.activity-user { .activity-user {
@include table-flex-child(1, 50px, 0); flex-basis: 50px;
flex-grow: 1;
img { img {
max-width: 70px; max-width: 70px;
width: 100%; width: 100%;
@ -224,7 +226,8 @@ a.show-more-comments {
} }
.activity-content { .activity-content {
@include table-flex-child(20, 150px, 0); flex-basis: 150px;
flex-grow: 20;
} }
.changes { .changes {
background: $whitish; background: $whitish;

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

@ -25,7 +25,9 @@
.lightbox-generic-form { .lightbox-generic-form {
form { form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
} }
fieldset { fieldset {
@ -58,11 +60,15 @@
} }
.settings { .settings {
@include table-flex(flex-start, stretch, flex, row, wrap, flex-start); align-content: flex-start;
align-items: stretch;
display: flex;
justify-content: flex-start;
margin-bottom: 1rem; margin-bottom: 1rem;
fieldset { fieldset {
@include table-flex-child(1, 30%, 0); flex-basis: 30%;
flex-grow: 1;
margin-right: .5rem; margin-right: .5rem;
text-align: center; text-align: center;
&:last-child { &:last-child {
@ -94,28 +100,20 @@
.client-requirement, .client-requirement,
.team-requirement, .team-requirement,
.iocaine-flag { .iocaine-flag {
input { input:checked+label {
&:checked {
+label {
background: $fresh-taiga; background: $fresh-taiga;
color: $white; color: $white;
} }
} }
}
}
.blocking-flag { .blocking-flag {
input { input:checked+label {
&:checked {
+label {
background: $red; background: $red;
color: $white; color: $white;
} }
} }
}
}
input[type="checkbox"] { input {
display: none; display: none;
} }
} }
@ -128,7 +126,9 @@
.lightbox-generic-bulk { .lightbox-generic-bulk {
form { form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
} }
textarea { textarea {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -139,7 +139,9 @@
.lightbox-search { .lightbox-search {
form { form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-grow: 0;
max-width: 600px;
} }
input { input {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -148,7 +150,7 @@
.lightbox-add-member { .lightbox-add-member {
.add-member-wrapper { .add-member-wrapper {
@include table-flex(); display: flex;
margin-bottom: .5rem; margin-bottom: .5rem;
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -156,10 +158,12 @@
fieldset { fieldset {
position: relative; position: relative;
&:first-child { &:first-child {
@include table-flex-child(3, 400px); flex-basis: 400px;
flex-grow: 3;
} }
&:last-child { &:last-child {
@include table-flex-child(1, 200px); flex-basis: 200px;
flex-grow: 1;
margin-left: .5rem; margin-left: .5rem;
} }
} }
@ -167,7 +171,7 @@
.extra-text { .extra-text {
margin-top: 1rem; margin-top: 1rem;
} }
input[type=email], input,
select { select {
margin-bottom: 0; margin-bottom: 0;
} }
@ -203,7 +207,9 @@
.lightbox-sprint-add-edit { .lightbox-sprint-add-edit {
form { form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-flow: 0;
max-width: 600px;
} }
.last-sprint-name { .last-sprint-name {
color: $gray; color: $gray;
@ -250,7 +256,9 @@
.lightbox-generic-ask { .lightbox-generic-ask {
form { form {
@include table-flex-child(0, 420px, 0, 420px); flex-basis: 420px;
flex-flow: 0;
max-width: 420px;
} }
.subtitle, .subtitle,
.message { .message {
@ -263,9 +271,9 @@
@extend %title; @extend %title;
} }
.options { .options {
@include table-flex(); display: flex;
a { a {
@include table-flex-child(1, 0, 0); flex-grow: 1;
padding: 8px 0; padding: 8px 0;
text-align: center; text-align: center;
&:first-child { &:first-child {
@ -278,7 +286,8 @@
.lightbox-ask-choice { .lightbox-ask-choice {
text-align: center; text-align: center;
form { form {
@include table-flex-child(0, 420px, 0); flex-basis: 420px;
flex-grow: 0;
} }
.question, .question,
.subtitle { .subtitle {
@ -297,9 +306,9 @@
} }
} }
.options { .options {
@include table-flex(); display: flex;
a { a {
@include table-flex-child(1, 0, 0); flex-grow: 1;
padding: 8px 0; padding: 8px 0;
text-align: center; text-align: center;
&:first-child { &:first-child {
@ -311,7 +320,9 @@
.lightbox-delete-account { .lightbox-delete-account {
form { form {
@include table-flex-child(0, 420px, 0, 420px); flex-basis: 420px;
flex-grow: 0;
width: 420px;
} }
.question, .question,
.subtitle { .subtitle {
@ -335,9 +346,9 @@
} }
} }
.options { .options {
@include table-flex(); display: flex;
a { a {
@include table-flex-child(1, 0, 0); flex-grow: 1;
padding: 8px 0; padding: 8px 0;
text-align: center; text-align: center;
&:first-child { &:first-child {
@ -349,7 +360,9 @@
.lightbox-delete-project { .lightbox-delete-project {
form { form {
@include table-flex-child(0, 420px, 0, 420px); flex-basis: 420px;
flex-grow: 0;
width: 420px;
} }
.question, .question,
.subtitle { .subtitle {
@ -362,9 +375,9 @@
@extend %title; @extend %title;
} }
.options { .options {
@include table-flex(); display: flex;
a { a {
@include table-flex-child(1, 0, 0); flex-grow: 1;
padding: 8px 0; padding: 8px 0;
text-align: center; text-align: center;
&:first-child { &:first-child {
@ -378,7 +391,9 @@
.lightbox-generic-success, .lightbox-generic-success,
.lightbox-generic-error { .lightbox-generic-error {
section { section {
@include table-flex-child(0, 420px, 0, 420px); flex-basis: 420px;
flex-grow: 0;
width: 420px;
} }
h2 { h2 {
line-height: 2rem; line-height: 2rem;
@ -387,14 +402,18 @@
.lightbox-create-issue { .lightbox-create-issue {
form { form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-grow: 0;
width: 600px;
} }
.fieldset-row { .fieldset-row {
@include table-flex(); display: flex;
fieldset { fieldset {
@include table-flex-child(1, 100px, 0, 30%); flex-basis: 100px;
flex-grow: 1;
margin-right: .5rem; margin-right: .5rem;
width: 30%;
&:last-child { &:last-child {
margin: 0; margin: 0;
} }
@ -410,7 +429,9 @@
.lightbox-block { .lightbox-block {
.form { .form {
@include table-flex-child(0, 420px, 0, 420px); flex-basis: 420px;
flex-grow: 0;
width: 420px;
} }
textarea { textarea {
margin-bottom: 1rem; margin-bottom: 1rem;
@ -421,14 +442,16 @@
.lightbox-select-user { .lightbox-select-user {
.form { .form {
@include table-flex-child(0, 600px, 0, 600px); flex-basis: 600px;
flex-grow: 0;
width: 600px;
} }
.watchers { .watchers {
margin-top: 1rem; margin-top: 1rem;
min-height: 440px; min-height: 440px;
.watcher-name { .watcher-name {
@include table-flex-child(12, 0); flex-grow: 12;
} }
} }
.watcher-single { .watcher-single {

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

@ -4,8 +4,11 @@
} }
.related-tasks-header { .related-tasks-header {
@include table-flex(space-between, center, flex, row, wrap, space-between); align-content: space-between;
align-items: center;
background: $whitish; background: $whitish;
display: flex;
justify-content: space-between;
padding: .5rem 1rem; padding: .5rem 1rem;
.related-tasks-title { .related-tasks-title {
@extend %medium; @extend %medium;
@ -26,8 +29,11 @@
width: 100%; width: 100%;
.row { .row {
@extend %small; @extend %small;
@include table-flex(center, center, flex, row, wrap, center); align-content: center;
align-items: center;
border-bottom: 1px solid $whitish; border-bottom: 1px solid $whitish;
display: flex;
justify-content: center;
padding: .5rem 0 .5rem .5rem; padding: .5rem 0 .5rem .5rem;
position: relative; position: relative;
text-align: left; text-align: left;
@ -43,13 +49,14 @@
border: 0; border: 0;
} }
.tasks { .tasks {
@include table-flex-child(10, 78%, 0); flex-basis: 78%;
flex-grow: 10;
} }
.status { .status {
@include table-flex-child(0, 10%, 0); flex-basis: 10%;
} }
.assigned-to { .assigned-to {
@include table-flex-child(0, 10%, 0); flex-basis: 10%;
} }
} }
.related-task-create-form { .related-task-create-form {
@ -106,6 +113,7 @@
white-space: nowrap; white-space: nowrap;
} }
input { input {
@extend %medium;
margin-right: 1rem; margin-right: 1rem;
padding: 3px; padding: 3px;
width: 85%; width: 85%;
@ -116,8 +124,7 @@
text-align: center; text-align: center;
width: 100%; width: 100%;
span { span {
animation: loading .5s linear; animation: loading .5s linear, spin 1s linear infinite;
animation: spin 1s linear infinite;
} }
} }
} }
@ -202,7 +209,7 @@
display: flex; display: flex;
img { img {
flex-basis: 35px; flex-basis: 35px;
/* width & height they are only required for IE */ // width & height they are only required for IE
height: 35px; height: 35px;
width: 35px; width: 35px;
} }

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

@ -42,9 +42,7 @@
&.active { &.active {
animation: formSlide .4s ease-in-out; animation: formSlide .4s ease-in-out;
&.create-step2, &.create-step2,
&.create-step3 { &.create-step3,
@include table-flex();
}
&.create-step1 { &.create-step1 {
display: block; display: block;
} }
@ -52,12 +50,13 @@
} }
.wizard-action { .wizard-action {
div { div {
@include table-flex(); display: flex;
} }
a { a {
@include table-flex-child(1, 40%, 0);
color: $white; color: $white;
display: inline-block; display: inline-block;
flex-basis: 40%;
flex-grow: 1;
&:first-child { &:first-child {
margin-right: .5rem; margin-right: .5rem;
} }
@ -65,23 +64,24 @@
} }
.create-step1 { .create-step1 {
.template-inner { .template-inner {
@include table-flex(); display: flex;
}
fieldset { fieldset {
@include table-flex-child(1, 0, 0); flex-grow: 1;
&:first-child { &:first-child {
margin-right: .5rem; margin-right: .5rem;
} }
} }
} input {
input[type="radio"] {
display: none; display: none;
&:checked { }
input:checked {
+label { +label {
background: rgba($fresh-taiga, .7); background: rgba($fresh-taiga, .7);
transition: background .3s ease-in; transition: background .3s ease-in;
} }
} }
+label { input+label {
background: rgba($whitish, .7); background: rgba($whitish, .7);
cursor: pointer; cursor: pointer;
display: block; display: block;
@ -98,7 +98,6 @@
color: $white; color: $white;
} }
} }
}
h2 { h2 {
color: $white; color: $white;
margin: 0; margin: 0;
@ -115,39 +114,36 @@
left: 0; left: 0;
position: absolute; position: absolute;
width: 100%; width: 100%;
&.step1 { }
.step1 {
.bar { .bar {
transition: width .6s ease-in-out; transition: width .6s ease-in-out;
width: 25%; width: 25%;
} }
.progress-state { .progress-state {
span { span:nth-child(1) {
&:nth-child(1) {
color: rgba($white, 1); color: rgba($white, 1);
transition: color .3s ease-in-out; transition: color .3s ease-in-out;
transition-delay: .6s; transition-delay: .6s;
} }
} }
} }
} .step2 {
&.step2 {
.bar { .bar {
transition: width .6s ease-in-out; transition: width .6s ease-in-out;
// width: 50%; // width: 50%;
width: 75%; width: 75%;
} }
.progress-state { .progress-state {
span { span:nth-child(1),
&:nth-child(1), span:nth-child(2) {
&:nth-child(2) {
color: rgba($white, 1); color: rgba($white, 1);
transition: color .3s ease-in-out; transition: color .3s ease-in-out;
transition-delay: .6s; transition-delay: .6s;
} }
} }
} }
}
}
.progress-state { .progress-state {
position: absolute; position: absolute;
width: 100%; width: 100%;

7
app/styles/modules/create-project.scss
View File

@ -1,7 +1,9 @@
.create-project { .create-project {
@extend %triangled-bg; @extend %triangled-bg;
@include table-flex(center, center, flex, row, wrap, center); align-content: center;
align-items: center;
bottom: 0; bottom: 0;
justify-content: center;
left: 0; left: 0;
position: fixed; position: fixed;
right: 0; right: 0;
@ -11,7 +13,8 @@
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.create-project-container { .create-project-container {
@include table-flex-child(0, 400px, 0, 400px); flex-basis: 400px;
flex-grow: 0;
} }
h1 { h1 {
color: $white; color: $white;

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

@ -16,7 +16,7 @@
vertical-align: middle; vertical-align: middle;
} }
} }
input[type="text"] { input {
background: $grayer; background: $grayer;
color: $white; color: $white;
@include placeholder { @include placeholder {

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

@ -19,7 +19,6 @@
color: $blackish; color: $blackish;
opacity: 1; opacity: 1;
transition: opacity .3s linear; transition: opacity .3s linear;
} }
} }
.active { .active {

3
app/styles/modules/help/lightbox-generic-notion.scss
View File

@ -1,5 +1,6 @@
.lightbox-generic-notion { .lightbox-generic-notion {
section { section {
@include table-flex-child(0, 600px, 0); display: flex;
flex-basis: 600px;
} }
} }

11
app/styles/modules/home-project.scss
View File

@ -1,7 +1,8 @@
.home-project-info-list { .home-project-info-list {
@include table-flex(); display: flex;
li { li {
@include table-flex-child(1, 0, 0, auto); flex-basis: 0;
flex-grow: 1;
margin-right: 1rem; margin-right: 1rem;
} }
.info-num { .info-num {
@ -20,12 +21,12 @@
} }
.project-data-container { .project-data-container {
@include table-flex(); display: flex;
p { p {
@include table-flex-child(3, 0, 0); flex-grow: 3;
} }
ul { ul {
@include table-flex-child(1, 0, 0); flex-grow: 1;
} }
li { li {
display: inline-block; display: inline-block;

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

@ -1,30 +1,31 @@
.home-projects-list, .home-projects-list,
.home-project { .home-project {
@extend %background-taiga; @extend %background-taiga;
@include table-flex(center, center, flex, row, wrap, center); align-content: center;
align-items: center;
background-color: $black; background-color: $black;
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
display: flex;
height: 100%; height: 100%;
justify-content: center;
left: 0; left: 0;
padding: 0; padding: 0;
position: fixed; position: fixed;
top: 0; top: 0;
width: 100%; width: 100%;
.welcome-user { .welcome-user {
@include table-flex(); display: flex;
position: absolute; position: absolute;
right: 1rem; right: 1rem;
top: 1rem; top: 1rem;
p { p {
color: $whitish; color: $whitish;
margin-bottom: 0; margin-bottom: 0;
span { span:before {
&:before {
content: ' '; content: ' ';
} }
} }
}
.logout { .logout {
@extend %small; @extend %small;
float: right; float: right;
@ -41,17 +42,20 @@
} }
} }
.home-projects-wrapper { .home-projects-wrapper {
@include table-flex-child(0, 1200px, 0, 1200px); flex-grow: 1;
max-width: 1200px;
} }
.home-projects-list-inner { .home-projects-list-inner {
@include table-flex(); display: flex;
} }
.recent-projects { .recent-projects {
@include table-flex-child(8, 0, 0, 800px); flex-grow: 8;
max-width: 800px;
ul { ul {
@include table-flex(); display: flex;
flex-wrap: wrap;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
@ -64,15 +68,18 @@
width: 100%; width: 100%;
} }
li { li {
@include table-flex-child(1, 230px, 0, 23.5%);
background-color: rgba($white, .5); background-color: rgba($white, .5);
color: $whitish; color: $whitish;
flex-basis: 230px;
flex-grow: 1;
flex-shrink: 0;
height: 130px; height: 130px;
margin-bottom: 1rem; margin-bottom: 1rem;
margin-right: 1rem; margin-right: 1rem;
overflow: hidden; overflow: hidden;
position: relative; position: relative;
transition: background-color .3s linear; transition: background-color .3s linear;
width: 23.5%;
&:hover { &:hover {
background-color: rgba($fresh-taiga, .5); background-color: rgba($fresh-taiga, .5);
cursor: pointer; cursor: pointer;
@ -104,13 +111,14 @@
} }
.all-projects { .all-projects {
@include table-flex-child(1, 285px, 0, 285px);
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 1;
margin-left: 1rem; margin-left: 1rem;
max-height: 422px; max-height: 422px;
padding: 1rem; padding: 1rem;
width: 285px;
h1 { h1 {
color: $whitish; color: $whitish;
flex-shrink: 0; flex-shrink: 0;
@ -136,15 +144,14 @@
padding: 1rem; padding: 1rem;
text-transform: uppercase; text-transform: uppercase;
width: 100%; width: 100%;
&.active,
&:hover { &:hover {
background-color: $gray; background-color: $gray;
transition: background-color .3s linear; transition: background-color .3s linear;
.icon {
opacity: 1;
transition: opacity .3s linear;
} }
} }
.active {
background-color: $gray;
transition: background-color .3s linear;
} }
} }
.projects-pagination { .projects-pagination {

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

@ -1,5 +1,5 @@
.issues-table { .issues-table {
@include table-flex(); display: flex;
margin-bottom: 2rem; margin-bottom: 2rem;
&.empty { &.empty {
display: none; display: none;
@ -33,21 +33,25 @@
border-bottom: 1px solid darken($whitish, 4%); border-bottom: 1px solid darken($whitish, 4%);
} }
.avatar { .avatar {
@include table-flex(stretch, center, flex, row, wrap, flex-start); align-items: center;
display: flex;
img { img {
width: 35px; width: 35px;
} }
figcaption { figcaption {
@include table-flex-child(1, 60%, 0); flex-basis: 60%;
flex-grow: 1;
margin-left: .5rem; margin-left: .5rem;
} }
} }
.level-field { .level-field {
@include table-flex-child(1, 70px, 0); flex-basis: 70px;
flex-grow: 1;
text-align: center; text-align: center;
} }
.subject { .subject {
@include table-flex-child(7, 300px, 0); flex-basis: 300px;
flex-grow: 7;
padding-right: 1rem; padding-right: 1rem;
span { span {
&:first-child { &:first-child {
@ -58,13 +62,15 @@
.issue-field, .issue-field,
.assigned-field, .assigned-field,
.created-field { .created-field {
@include table-flex-child(1, 100px, 0); flex-basis: 100px;
flex-grow: 1;
padding: 0 1rem; padding: 0 1rem;
position: relative; position: relative;
text-align: left; text-align: left;
} }
.assigned-field { .assigned-field {
@include table-flex-child(2, 100px, 0); flex-basis: 100px;
flex-grow: 2;
} }
.issue-assignedto { .issue-assignedto {
cursor: pointer; cursor: pointer;

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

@ -11,9 +11,9 @@ $column-margin: 0 10px 0 0;
width: 100%; width: 100%;
.vfold { .vfold {
&.task-colum-name { &.task-colum-name {
@include table-flex();
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
display: flex;
justify-content: center; justify-content: center;
opacity: .8; opacity: .8;
padding: .5rem 0; padding: .5rem 0;
@ -33,7 +33,7 @@ $column-margin: 0 10px 0 0;
} }
&.task-colum-name, &.task-colum-name,
&.task-column { &.task-column {
@include table-flex-child(1, 0, 0); flex-flow: 1;
max-width: $column-folded-width; max-width: $column-folded-width;
min-height: 2.5rem; min-height: 2.5rem;
min-width: $column-folded-width; min-width: $column-folded-width;
@ -50,23 +50,24 @@ $column-margin: 0 10px 0 0;
position: relative; position: relative;
width: 100%; width: 100%;
.kanban-table-inner { .kanban-table-inner {
@include table-flex(); display: flex;
overflow: hidden; overflow: hidden;
position: absolute; position: absolute;
} }
.task-colum-name { .task-colum-name {
@extend %large; @extend %large;
@include table-flex();
background: $whitish; background: $whitish;
border-top: 3px solid $gray-light; border-top: 3px solid $gray-light;
flex: auto 0 auto; display: flex;
flex-basis: $column-width;
flex-grow: $column-flex;
flex-shrink: $column-shrink;
justify-content: space-between; justify-content: space-between;
margin: $column-margin; margin: $column-margin;
max-width: $column-width; max-width: $column-width;
padding: .5rem .5rem .5rem 1rem; padding: .5rem .5rem .5rem 1rem;
position: relative; position: relative;
text-transform: uppercase; text-transform: uppercase;
width: $column-width;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
} }
@ -89,13 +90,16 @@ $column-margin: 0 10px 0 0;
.kanban-table-body { .kanban-table-body {
@extend %medium; @extend %medium;
@include table-flex(); display: flex;
overflow: hidden; overflow: hidden;
overflow-x: auto; overflow-x: auto;
width: 100%; width: 100%;
.task-column { .task-column {
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width); flex-basis: $column-width;
flex-grow: $column-flex;
flex-shrink: $column-shrink;
margin: $column-margin; margin: $column-margin;
max-width: $column-width;
overflow-y: auto; overflow-y: auto;
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;
@ -123,5 +127,6 @@ $column-margin: 0 10px 0 0;
} }
.kanban-table-inner { .kanban-table-inner {
@include table-flex($flex-wrap: nowrap); display: flex;
flex-wrap: nowrap;
} }

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

@ -17,7 +17,8 @@
} }
.user-stories { .user-stories {
flex-basis: 0; flex-basis: 0;
flex-grow: 10; flex-grow: 5;
flex-shrink: 1;
} }
.status, .status,
.points { .points {
@ -27,7 +28,7 @@
text-align: center; text-align: center;
} }
.assigned-to { .assigned-to {
flex-basis: 150px; flex-basis: 250px;
flex-grow: 1; flex-grow: 1;
padding: 0 1rem; padding: 0 1rem;
} }

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

@ -20,12 +20,12 @@
&.active { &.active {
color: $green-taiga; color: $green-taiga;
transition: color .3s linear; transition: color .3s linear;
.icon { }
&.active.icon {
opacity: 1; opacity: 1;
transition: opacity .3s linear; transition: opacity .3s linear;
} }
} }
}
.active { .active {
opacity: 1; opacity: 1;
transition: opacity .3s linear; transition: opacity .3s linear;

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

@ -67,9 +67,11 @@
} }
} }
.avatar { .avatar {
@include table-flex(stretch, center, flex, row, wrap, flex-start); align-items: center;
display: flex;
img { img {
@include table-flex-child(1, 66px, 0); flex-basis: 66px;
flex-grow: 1;
max-width: 66px; max-width: 66px;
} }
figcaption { figcaption {

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

@ -1,7 +1,9 @@
.policy-table { .policy-table {
.policy-table-row { .policy-table-row {
@include table-flex(stretch, center, flex, row, wrap, center); align-items: center;
border-bottom: 1px solid $whitish; border-bottom: 1px solid $whitish;
display: flex;
justify-content: center;
} }
.policy-table-header { .policy-table-header {
@ -17,13 +19,15 @@
} }
.policy-table-project { .policy-table-project {
@include table-flex-child(3, 0, 0); flex-basis: 0;
flex-grow: 3;
} }
.policy-table-all, .policy-table-all,
.policy-table-involved, .policy-table-involved,
.policy-table-none { .policy-table-none {
@include table-flex-child(1, 0, 0); flex-basis: 0;
flex-grow: 1;
} }
input { input {
display: none; display: none;

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

@ -3,10 +3,11 @@
max-width: 700px; max-width: 700px;
width: 100%; width: 100%;
.container { .container {
@include table-flex(); display: flex;
} }
.avatar-container { .avatar-container {
@include table-flex-child(1, 0, 0); flex-basis: 0;
flex-grow: 1;
margin-right: 1rem; margin-right: 1rem;
.image-container { .image-container {
position: relative; position: relative;
@ -51,7 +52,8 @@
} }
} }
.data { .data {
@include table-flex-child(3, 0, 0); flex-basis: 0;
flex-grow: 3;
} }
} }
fieldset { fieldset {

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

@ -42,8 +42,7 @@
float: none; float: none;
} }
span { span {
animation: loading .5s linear; animation: loading .5s linear, spin 1s linear infinite;
animation: spin 1s linear infinite;
} }
} }
} }