Merge pull request 'fix/issue53-backgrond-collections' (#55) from fix/issue53-backgrond-collections into main

Reviewed-on: #55
This commit is contained in:
jorge 2022-03-22 19:57:20 +01:00
commit 41eb169bfb
3 changed files with 132 additions and 67 deletions

3
.gitignore vendored
View File

@ -2,5 +2,6 @@
bower_components bower_components
node_modules node_modules
npm-debug.log npm-debug.log
_
index* index*
index.html index*.html

File diff suppressed because one or more lines are too long

View File

@ -240,79 +240,143 @@ main {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
// accordion for colletions list
.accordion-item { .accordion-item {
&:not(.title).is-active { &.title {
background-color:$input-background; .accordion-title {
} @include breakpoint(small){
} li {
.accordion-title { @include xy-cell(3);
ul,ol{ @include xy-cell-offset(0);
} &.title,&.curator,&.collection-name,&.date {
@include breakpoint(small){ &::before {content: none;}
li { }
&.title, &.date {
&.curator, margin-left: auto;
&.collection-name, }
&.date { .ascToggle{
@include xy-cell(auto); position:absolute;
padding-left: 0.21rem;
}
}
} }
} @include breakpoint(medium){
} li {
@include breakpoint(medium){ &.title {
li { @include xy-cell(4);
&.title { }
@include xy-cell(4); &.curator {
} @include xy-cell(4);
&.curator { }
@include xy-cell(4); &.collection-name {
} @include xy-cell(2);
&.collection-name { }
@include xy-cell(2); &.date {
} @include xy-cell(shrink);
&.date { margin-left: auto; //aligns to right
@include xy-cell(shrink); }
margin-left: auto; //aligns to right
}
}
}
}
.accordion-content {
padding-top: 0;
section {
@include xy-grid;
padding-top: 0;
padding-bottom: 0;
@include breakpoint(small){
figure {
@include xy-cell(12);
margin-left:0;
margin-right:0;
}
p {
@include xy-cell(12);
position: relative;
padding: $global-padding;
padding-bottom: $global-padding * 3;
.button {
position:absolute;
right:0;
margin-top: $global-padding * 3;
} }
} }
} }
@include breakpoint(medium){ }
figure { &:not(.title){
@include xy-cell(4); &.is-active {
margin-left: 0; background-color:$input-background;
}
p {
@include xy-cell(8);
}
} }
@include breakpoint(large){ .accordion-title {
@include breakpoint(small){
li {
&.title,
&.curator,
&.collection-name,
&.date {
@include xy-cell(10);
@include xy-cell-offset(2);
min-height: 1rem;
&::before {
display: inline-block;
color: $medium-gray;
position: absolute;
left:0;
}
}
&.title::before {content:"Title";}
&.curator::before {content:"Artist";}
&.collection-name::before {content:"Collection";}
&.date::before {content:"Date";}
}
}
@include breakpoint(medium){
li {
&.title,
&.curator,
&.collection-name,
&.date {
min-height:unset;
&::before {
content: none;
// content:"";
}
}
&.title {
@include xy-cell(4);
}
&.curator {
@include xy-cell(4);
}
&.collection-name {
@include xy-cell(2);
}
&.date {
@include xy-cell(shrink);
margin-left: auto; //aligns to right
}
}
}
} }
} }
} .accordion-title {
ul,ol {
margin: 0;
}
}
.accordion-content {
padding-top: 0;
section {
@include xy-grid;
@include breakpoint(small){
padding: 0;
figure {
@include xy-cell(12);
}
p {
@include xy-cell(12);
position: relative;
padding-top: $global-padding * 1;
padding-bottom: $global-padding * 3;
.button {
position:absolute;
right:0;
margin-top: $global-padding * 3;
}
}
}
@include breakpoint(medium){
figure {
@include xy-cell(4);
@include xy-gutters;
}
p {
@include xy-cell(8);
padding-top: 0;
}
}
@include breakpoint(large){
}
}
}
}
} }
// end collections category // end collections category