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
|
||||
node_modules
|
||||
npm-debug.log
|
||||
_
|
||||
index*
|
||||
index.html
|
||||
index*.html
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -240,79 +240,143 @@ main {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// accordion for colletions list
|
||||
.accordion-item {
|
||||
&:not(.title).is-active {
|
||||
background-color:$input-background;
|
||||
}
|
||||
}
|
||||
.accordion-title {
|
||||
ul,ol{
|
||||
}
|
||||
@include breakpoint(small){
|
||||
li {
|
||||
&.title,
|
||||
&.curator,
|
||||
&.collection-name,
|
||||
&.date {
|
||||
@include xy-cell(auto);
|
||||
&.title {
|
||||
.accordion-title {
|
||||
@include breakpoint(small){
|
||||
li {
|
||||
@include xy-cell(3);
|
||||
@include xy-cell-offset(0);
|
||||
&.title,&.curator,&.collection-name,&.date {
|
||||
&::before {content: none;}
|
||||
}
|
||||
&.date {
|
||||
margin-left: auto;
|
||||
}
|
||||
.ascToggle{
|
||||
position:absolute;
|
||||
padding-left: 0.21rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint(medium){
|
||||
li {
|
||||
&.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-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){
|
||||
li {
|
||||
&.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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include breakpoint(medium){
|
||||
figure {
|
||||
@include xy-cell(4);
|
||||
margin-left: 0;
|
||||
}
|
||||
p {
|
||||
@include xy-cell(8);
|
||||
}
|
||||
}
|
||||
&:not(.title){
|
||||
&.is-active {
|
||||
background-color:$input-background;
|
||||
}
|
||||
@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
|
||||
|
||||
|
|
Loading…
Reference in New Issue