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 { .basic-table {
align-content: stretch; @include table-flex(stretch, center, flex, column, wrap, flex-start);
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%; width: 100%;
.row { .row {
align-content: stretch; @include table-flex(stretch, center, flex, row, nowrap, flex-start);
align-items: center;
border-bottom: 1px solid $gray-light; border-bottom: 1px solid $gray-light;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
padding: .5rem 0; padding: .5rem 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} {
flex-basis: 50px; @include table-flex-child($i, 50px, 0);
flex-grow: $i;
flex-shrink: 0;
} }
} }
&:last-child { &:last-child {

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

@ -11,17 +11,17 @@
// Table Flex - http://devbryce.com/site/flexbox/ // Table Flex - http://devbryce.com/site/flexbox/
@mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) { @mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
align-content: $align-content; // flex-start, flex-end, center, space-between, space-around, stretch @include display($display);
align-items: $align-items; //flex-start, flex-end, center, baseline, stretch @include align-content($align-content);
display: $display; @include align-items($align-items);
flex-direction: $flex-direction; //row | row-reverse | column | column-reverse @include flex-direction($flex-direction);
flex-wrap: $flex-wrap; // nowrap | wrap | wrap-reverse @include flex-wrap($flex-wrap);
justify-content: $justify-content; //flex-start | flex-end | center | space-between | space-around @include justify-content($justify-content);
} }
@mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') { @mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {
flex-basis: $flex-basis; @include flex($flex-grow);
flex-grow: $flex-grow; @include flex-basis($flex-basis);
flex-shrink: $flex-shrink; flex-shrink: $flex-shrink;
width: $flex-basis; width: $flex-basis;
@if #{$width} != null { @if #{$width} != null {

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

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

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

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

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

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

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

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

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

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

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

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