styled list collections accordion in mobile
This commit is contained in:
parent
1eeac2565d
commit
7ab2aaeec5
File diff suppressed because one or more lines are too long
|
@ -240,31 +240,16 @@ main {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// accordion for colletions list
|
||||
.accordion-item {
|
||||
&:not(.title).is-active {
|
||||
background-color:$input-background;
|
||||
}
|
||||
}
|
||||
.accordion-item.title li {
|
||||
// @include xy-cell(3);
|
||||
// @include xy-cell-offset(0);
|
||||
//}
|
||||
}
|
||||
.accordion-title {
|
||||
&.title {
|
||||
@include breakpoint(small){
|
||||
li {
|
||||
@include xy-cell(3);
|
||||
@include xy-cell-offset(0);
|
||||
&.title,&.curator,&.collection-name,&.date {
|
||||
&::before {content: none;}
|
||||
}
|
||||
}
|
||||
&:not(.title){
|
||||
&.is-active {
|
||||
background-color:$input-background;
|
||||
}
|
||||
}
|
||||
&:not(.title) {
|
||||
@include breakpoint(small){
|
||||
li {
|
||||
.accordion-title {
|
||||
@include breakpoint(small){
|
||||
li {
|
||||
&.title,
|
||||
&.curator,
|
||||
&.collection-name,
|
||||
|
@ -275,7 +260,6 @@ main {
|
|||
&::before {
|
||||
display: inline-block;
|
||||
color: $medium-gray;
|
||||
//font-size: $accordion-title-font-size;
|
||||
position: absolute;
|
||||
left:0;
|
||||
}
|
||||
|
@ -284,77 +268,93 @@ main {
|
|||
&.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;
|
||||
@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
|
||||
}
|
||||
}
|
||||
&.title::before {content:"";}
|
||||
&.curator::before {content:"";}
|
||||
&.collection-name::before {content:"";}
|
||||
&.date::before {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
|
||||
}
|
||||
}
|
||||
}
|
||||
&.title {
|
||||
.accordion-title {
|
||||
@include breakpoint(small){
|
||||
li {
|
||||
@include xy-cell(3);
|
||||
@include xy-cell-offset(0);
|
||||
&.title,&.curator,&.collection-name,&.date {
|
||||
&::before {content: none;}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.accordion-content {
|
||||
padding-top: 0;
|
||||
section {
|
||||
@include xy-grid;
|
||||
.accordion-title {
|
||||
ul,ol {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.accordion-content {
|
||||
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;
|
||||
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 {
|
||||
@include xy-cell(4);
|
||||
margin-left: 0;
|
||||
@include breakpoint(medium){
|
||||
figure {
|
||||
@include xy-cell(4);
|
||||
margin-left: 0;
|
||||
}
|
||||
p {
|
||||
@include xy-cell(8);
|
||||
}
|
||||
}
|
||||
p {
|
||||
@include xy-cell(8);
|
||||
@include breakpoint(large){
|
||||
}
|
||||
}
|
||||
@include breakpoint(large){
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// end collections category
|
||||
|
||||
|
|
Loading…
Reference in New Issue