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

Fixed lightboxes

stable
Xavier Julián 2014-10-01 12:06:37 +02:00
parent 56954aa1f0
commit d1a915faca
8 changed files with 36 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -11,17 +11,17 @@
// 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
@include display($display);
@include align-content($align-content);
@include align-items($align-items);
@include flex-direction($flex-direction);
@include flex-wrap($flex-wrap);
@include justify-content($justify-content);
}
@mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {
flex-basis: $flex-basis;
flex-grow: $flex-grow;
@include flex($flex-grow);
@include flex-basis($flex-basis);
flex-shrink: $flex-shrink;
width: $flex-basis;
@if #{$width} != null {

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

@ -125,12 +125,10 @@ body {
}
.header-with-actions {
align-items: center;
display: flex;
justify-content: space-between;
@include table-flex(stretch, center, flex, row, wrap, space-between);
margin-bottom: 1rem;
.action-buttons {
flex-shrink: 0;
@include flex-shrink(0);
padding-left: 1rem;
}
h1 {

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

@ -3,13 +3,13 @@
@extend %bold;
}
.avatar {
align-items: center;
display: flex;
@include table-flex(stretch, center, flex, row, wrap, flex-start);
figcaption {
margin-left: 1rem;
}
img {
flex-basis: 35px;
@include table-flex-child(1, 35px, 0);
max-width: 35px;
}
.name,
.email {
@ -54,12 +54,11 @@
padding-right: 1rem;
}
.row-status {
display: flex;
@include table-flex();
.delete {
@extend %large;
align-items: center;
@include table-flex(stretch, center, flex, row, wrap, flex-start);
color: $gray-light;
display: flex;
margin-left: 15px;
padding: 0 15px;
&:hover {
@ -79,13 +78,13 @@
.row-role,
.header-member,
.header-role {
flex: 3 0 50px;
@include table-flex-child(3, 35px, 0);
}
.row-status,
.row-admin,
.header-admin,
.header-status {
flex: 1 0 50px;
@include table-flex-child(1, 50px, 0);
}
.check {
background-color: darken($whitish, 10%);

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

@ -1,7 +1,6 @@
.lightbox,
%lightbox {
@include background-opacity($white, .95);
@include table-flex(center, center, flex, row, wrap, center);
@include transition (opacity .3s ease);
bottom: 0;
display: none;
@ -17,6 +16,9 @@
right: 2rem;
top: 2rem;
}
&.open {
@include table-flex(center, center, flex, row, wrap, center);
}
.title {
text-align: center;
}
@ -96,18 +98,11 @@
}
.settings {
align-content: flex-start;
align-items: stretch;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
@include table-flex(flex-start, stretch, flex, row, wrap, flex-start);
margin-bottom: 1rem;
fieldset {
flex-basis: 30%;
flex-grow: 1;
flex-shrink: 0;
@include table-flex-child(1, 30%, 0);
margin-right: .5rem;
text-align: center;
&:last-child {

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

@ -12,7 +12,7 @@
top: 0;
width: 100%;
.welcome-user {
display: flex;
@include table-flex();
position: absolute;
right: 1rem;
top: 1rem;

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

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

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

@ -20,7 +20,7 @@ $column-margin: 0 10px 0 0;
position: absolute;
}
.task-colum_name {
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
@include table-flex-child();
@extend %large;
background: $whitish;
border-top: 3px solid $gray-light;
@ -60,7 +60,7 @@ $column-margin: 0 10px 0 0;
overflow-x: auto;
width: 100%;
.task-column {
@include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
@include table-flex-child();
margin: $column-margin;
overflow-y: auto;
&:last-child {
@ -80,5 +80,5 @@ $column-margin: 0 10px 0 0;
}
.kanban-table-inner {
@include table-flex(stretch, stretch, flex, row, nowrap, flex-start);
@include table-flex($flex-wrap: nowrap);
}