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

Removed flexbox mixins to vanilla CSS

stable
Xavier Julián 2015-01-15 14:35:09 +01:00
parent b1a0ba2345
commit b02032634d
25 changed files with 256 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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__ //
%xsmall {font-size: .5rem;}
%small {font-size: .8rem;}
@ -48,7 +30,10 @@
top: 2rem;
}
&.open {
@include table-flex(center, center, flex, row, wrap, center);
align-content: center;
align-items: center;
display: flex;
justify-content: center;
opacity: 1;
transition: opacity .3s ease;
}

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

@ -5,8 +5,10 @@
text-overflow: ellipsis;
}
// DEPRECATED MIXIN
// USE FLEXBOX WITHOUT PREFIXES.
// 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
align-items: $align-items; //flex-start | flex-end | center | baseline | stretch
display: $display;
@ -24,7 +26,7 @@
width: #{$width};
}
}
*/
@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;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -31,8 +31,9 @@ $column-margin: 0 10px 0 0;
}
&.task-column,
.task-column {
@include table-flex(flex-start);
flex-direction: row;
align-content: flex-start;
display: flex;
flex-direction: column;
}
.avatar-task-link {
display: block;
@ -52,16 +53,25 @@ $column-margin: 0 10px 0 0;
position: relative;
width: 100%;
.taskboard-table-inner {
@include table-flex();
display: flex;
overflow: hidden;
position: absolute;
}
.task-colum-name {
@extend %large;
<<<<<<< HEAD
@include table-flex();
background: $whitish;
border-top: 3px solid $gray-light;
flex: auto 0 auto;
=======
background: $whitish;
border-top: 3px solid $gray-light;
display: flex;
flex-basis: $column-width;
flex-grow: $column-flex;
flex-shrink: $column-shrink;
>>>>>>> Removed flexbox mixins to vanilla CSS
justify-content: space-between;
margin: $column-margin;
max-width: $column-width;
@ -93,15 +103,13 @@ $column-margin: 0 10px 0 0;
span {
display: none;
}
.icon {
&.hfold,
&.hunfold {
.hfold,
.hunfold {
margin: 0;
}
}
}
}
}
.taskboard-table-body {
height: 700px;
@ -109,7 +117,9 @@ $column-margin: 0 10px 0 0;
overflow-y: scroll;
width: 100%;
.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;
max-width: $column-width;
width: $column-width;
@ -128,7 +138,7 @@ $column-margin: 0 10px 0 0;
}
}
.task-row {
@include table-flex();
display: flex;
margin-bottom: .5rem;
min-height: 10rem;
width: 100%;
@ -142,23 +152,23 @@ $column-margin: 0 10px 0 0;
.taskboard-userstory-box {
background: rgba($red, .6);
border-radius: 3px;
}
a,
.points-value {
color: rgba($white, .9);
transition: color .3s linear;
&:hover {
}
a:hover,
.points-value:hover {
color: rgba($white, 1);
transition: color .3s linear;
}
}
}
.taskboard-tasks-box {
background: rgba($red, .1);
}
}
&.row-fold {
min-height: 0;
.taskboard-userstory-box {
.us-title {
@include ellipsis(100%);
}
@ -169,7 +179,6 @@ $column-margin: 0 10px 0 0;
}
}
}
}
.taskboard-tasks-box {
background: $whitish;
}

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

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

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

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

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

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

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

@ -1,5 +1,6 @@
.lightbox-generic-notion {
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 {
@include table-flex();
display: flex;
li {
@include table-flex-child(1, 0, 0, auto);
flex-basis: 0;
flex-grow: 1;
margin-right: 1rem;
}
.info-num {
@ -20,12 +21,12 @@
}
.project-data-container {
@include table-flex();
display: flex;
p {
@include table-flex-child(3, 0, 0);
flex-grow: 3;
}
ul {
@include table-flex-child(1, 0, 0);
flex-grow: 1;
}
li {
display: inline-block;

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

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

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

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

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

@ -11,9 +11,9 @@ $column-margin: 0 10px 0 0;
width: 100%;
.vfold {
&.task-colum-name {
@include table-flex();
align-items: center;
cursor: pointer;
display: flex;
justify-content: center;
opacity: .8;
padding: .5rem 0;
@ -33,7 +33,7 @@ $column-margin: 0 10px 0 0;
}
&.task-colum-name,
&.task-column {
@include table-flex-child(1, 0, 0);
flex-flow: 1;
max-width: $column-folded-width;
min-height: 2.5rem;
min-width: $column-folded-width;
@ -50,16 +50,18 @@ $column-margin: 0 10px 0 0;
position: relative;
width: 100%;
.kanban-table-inner {
@include table-flex();
display: flex;
overflow: hidden;
position: absolute;
}
.task-colum-name {
@extend %large;
@include table-flex();
background: $whitish;
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;
margin: $column-margin;
max-width: $column-width;
@ -89,14 +91,17 @@ $column-margin: 0 10px 0 0;
.kanban-table-body {
@extend %medium;
@include table-flex();
display: flex;
overflow: hidden;
overflow-x: auto;
width: 100%;
.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;
overflow-y: auto;
widows: $column-width;
&:last-child {
margin-right: 0;
}
@ -123,5 +128,6 @@ $column-margin: 0 10px 0 0;
}
.kanban-table-inner {
@include table-flex($flex-wrap: nowrap);
display: flex;
flex-wrap: nowrap;
}

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

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

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

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

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

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

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

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