Merge pull request 'fix/issue53-backgrond-collections' (#55) from fix/issue53-backgrond-collections into main
Reviewed-on: #55
This commit is contained in:
commit
41eb169bfb
|
@ -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
|
@ -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
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue