Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-08-20 14:43:49 +00:00
Code Issues Actions Projects Releases Wiki Activity

stash commit 2

Browse Source
This commit is contained in:
Julie Lenaerts
2021-09-23 14:55:54 +02:00
parent 05c5eaa925
commit a28c996164
8 changed files with 391 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

454
src/Bundle/ChillMainBundle/Resources/public/chill/scss/flex_table.scss
View File

@@ -8,39 +8,45 @@
div.flex-bloc,
div.flex-table {
display: flex;
align-items: stretch;
align-content: stretch;
box-sizing: border-box;
margin: 1.5em 0;
div.item-bloc {
display: flex;
align-items: stretch;
align-content: stretch;
box-sizing: border-box;
margin: 1.5em 0;
@include border-collapse;
padding: 1em;
div.item-bloc {
div.item-row {
display: flex;
div.item-col:last-child {
display: flex;
@include border-collapse;
padding: 1em;
div.item-row {
display: flex;
div.item-col:last-child {
display: flex;
}
}
}
}
}
h2, h3, h4, dl, p {
margin: 0;
}
h2, h3, h4 {
color: $blue;
}
h2,
h3,
h4,
dl,
p {
margin: 0;
}
h2,
h3,
h4 {
color: $blue;
}
ul.record_actions {
margin: 0;
li {
margin-right: 5px;
}
ul.record_actions {
margin: 0;
li {
margin-right: 5px;
}
}
}
/*
@@ -48,36 +54,43 @@ div.flex-table {
*/
div.flex-bloc {
flex-direction: row;
flex-wrap: wrap;
flex-direction: row;
flex-wrap: wrap;
div.item-bloc {
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
flex-direction: column;
margin: 0;
hyphens: auto;
div.item-bloc {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
flex-direction: column;
margin: 0;
hyphens: auto;
div.item-row {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
flex-direction: column;
div.item-row {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
flex-direction: column;
div.item-col {
&:first-child {
flex-grow: 0; flex-shrink: 0; flex-basis: auto;
}
&:last-child {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
@include separator;
ul.record_actions {
align-self: flex-end;
}
}
}
div.item-col {
&:first-child {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
&:last-child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
@include separator;
ul.record_actions {
align-self: flex-end;
}
}
}
}
}
}
/*
@@ -85,53 +98,57 @@ div.flex-bloc {
*/
div.flex-table {
flex-direction: column;
div.item-bloc {
flex-direction: column;
div.item-bloc {
flex-direction: column;
&:nth-child(even) {
background-color: $gray-200;
&:nth-child(even) {
background-color: $gray-200;
.chill-user-quote {
background-color: shade-color($gray-200, 5%)
}
}
div.item-row {
flex-direction: row;
div.item-col {
&:first-child {
flex-grow: 0; flex-shrink: 0; flex-basis: auto;
}
&:last-child {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
justify-content: flex-end;
@include media-breakpoint-down(md) {
@include separator;
}
ul.record_actions {
align-self: flex-start;
}
}
}
@include media-breakpoint-down(md) {
flex-direction: column;
div.item-col {
&:last-child {
ul.record_actions {
align-self: flex-end;
}
}
}
}
}
.chill-user-quote {
background-color: shade-color($gray-200, 5%);
}
}
div.item-row {
flex-direction: row;
div.item-col {
&:first-child {
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
}
&:last-child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
justify-content: flex-end;
@include media-breakpoint-down(md) {
@include separator;
}
ul.record_actions {
align-self: flex-start;
}
}
}
@include media-breakpoint-down(md) {
flex-direction: column;
div.item-col {
&:last-child {
ul.record_actions {
align-self: flex-end;
}
}
}
}
}
}
}
/*
@@ -140,54 +157,54 @@ div.flex-table {
*/
div.wrap-list {
padding: 0;
width: 100%;
padding: 0;
width: 100%;
div.wl-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
div.wl-row {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
div.wl-col.title {
width: auto;
flex-shrink: 0;
div.wl-col.title {
width: auto;
flex-shrink: 0;
@include media-breakpoint-up(md) {
//margin-left: 1.5em;
}
@include media-breakpoint-up(md) {
//margin-left: 1.5em;
}
& > * {
padding-right: 1em;
}
}
div.wl-col.list {
width: 75%;
margin: auto 0 0 auto;
.wl-item {
margin: 0.1em;
padding: 0em;
display: inline-block;
}
}
& > * {
padding-right: 1em;
}
}
&.debug .wl-row {
border: 1px solid $black;
div.wl-col.list {
width: 75%;
margin: auto 0 0 auto;
div.wl-col.title {
background-color: yellow;
}
div.wl-col.list {
background-color: cyan;
p.wl-item {
background-color: orange;
}
}
.wl-item {
margin: 0.1em;
padding: 0em;
display: inline-block;
}
}
}
&.debug .wl-row {
border: 1px solid $black;
div.wl-col.title {
background-color: yellow;
}
div.wl-col.list {
background-color: cyan;
p.wl-item {
background-color: orange;
}
}
}
}
/*
@@ -196,43 +213,56 @@ div.wrap-list {
*/
div.wrap-header {
width: 100%;
width: 100%;
div.wh-row {
display: flex;
flex-direction: row;
&:first-child {
align-items: baseline;
}
&:last-child {
}
div.wh-col {
&:first-child {
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
&:last-child {
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
div.wh-row {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
}
}
&.debug {
border: 1px solid $black;
div.wh-row {
&:first-child div.wh-col {
&:first-child {
align-items: baseline;
background-color: $yellow;
}
&:last-child {}
div.wh-col {
&:first-child {
flex-grow: 0; flex-shrink: 1; flex-basis: auto;
}
&:last-child {
flex-grow: 1; flex-shrink: 1; flex-basis: auto;
display: flex;
justify-content: flex-end;
}
}
}
&.debug {
border: 1px solid $black;
div.wh-row {
&:first-child div.wh-col {
&:first-child { background-color: $yellow; }
&:last-child { background-color: $beige; }
}
&:last-child div.wh-col {
&:first-child { background-color: $orange; }
&:last-child { background-color: $pink; }
}
&:last-child {
background-color: $beige;
}
}
&:last-child div.wh-col {
&:first-child {
background-color: $orange;
}
&:last-child {
background-color: $pink;
}
}
}
}
}
/*
@@ -243,69 +273,67 @@ div.flex-bloc,
div.flex-table,
div.wrap-list,
div.wrap-header {
div.separator {
@include separator;
}
div.separator {
@include separator;
}
ul.record_actions {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
margin: 0;
li {
margin-right: 5px;
}
ul.record_actions {
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto;
margin: 0;
li {
margin-right: 5px;
}
}
}
/*
* FLOATBUTTON
* p-ê pas convaincant: cet asset est toujours en observation
*/
div.float-button {
width: 100%;
div.box {
width: 100%;
div.box {
width: 100%;
div.action {
float: right;
}
}
&.top {
div.action {
padding: 0 0 1em 1em;
}
div.action {
float: right;
}
// avoid a position relative that make links unclickable
.fa-ul > li {
position: initial;
}
&.top {
div.action {
padding: 0 0 1em 1em;
}
// avoid a position relative that make links unclickable
.fa-ul > li {
position: initial;
}
}
&.bottom {
display: flex;
overflow: hidden;
div.action {
height: calc(100% - 0em);
shape-outside: inset(calc(100% - 2em) 0 0);
display: flex;
align-items: flex-end;
padding: 0 0 0 1em;
* {
align-self: flex-end !important;
}
}
&.bottom {
display: flex;
overflow: hidden;
div.action {
height: calc(100% - 0em);
shape-outside: inset(calc(100% - 2em) 0 0);
display: flex;
align-items: flex-end;
padding: 0 0 0 1em;
* {
align-self: flex-end !important;
}
}
}
&.debug {
padding: 1em;
border: 1px solid black;
background-color: yellow;
div.action {
background-color: transparentize(#00ffff, 0.4);
}
}
&.debug {
padding: 1em;
border: 1px solid black;
background-color: yellow;
div.action {
background-color: transparentize(#00ffff, 0.4);
}
}
}