You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
516 lines
8.9 KiB
516 lines
8.9 KiB
// stylelint-disable no-descending-specificity |
|
|
|
.catalog { |
|
.banner .container { |
|
height: rem(381); |
|
} |
|
|
|
.banner .primary-navigation { |
|
height: rem(381); |
|
} |
|
|
|
.page-header { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: center; |
|
height: rem(381); |
|
margin-top: rem(-381); |
|
|
|
h1 { |
|
color: var(--primary, $brand-primary); |
|
margin-bottom: 2rem; |
|
font-size: rem(36); |
|
line-height: 0.55556; |
|
letter-spacing: 0.1125rem; |
|
} |
|
} |
|
|
|
.network-catalog { |
|
width: 100%; |
|
padding-bottom: rem(152); |
|
} |
|
|
|
.controls { |
|
width: 100%; |
|
} |
|
|
|
.book { |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: flex-end; |
|
width: percent(165, 358); |
|
margin: 0 percent(9, 358) rem(8) 0; |
|
height: rem(230); |
|
float: left; |
|
padding: 1.5rem rem(8) rem(26); |
|
border: solid 2px var(--accent, $brand-accent); |
|
background: var(--accent, $brand-accent); |
|
|
|
p { |
|
margin: 0; |
|
} |
|
|
|
a { |
|
font-family: $font-family-sans-serif; |
|
color: var(--accent-fg, $white); |
|
text-decoration: none; |
|
} |
|
|
|
&__subject { |
|
height: rem(44); |
|
font-size: rem(14); |
|
} |
|
|
|
&__title { |
|
height: rem(118); |
|
font-size: rem(16); |
|
font-weight: 600; |
|
line-height: (20/16); |
|
} |
|
|
|
&__read-more { |
|
font-size: rem(14); |
|
} |
|
} |
|
|
|
.catalog-navigation { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: center; |
|
width: 100%; |
|
margin-top: rem(83); |
|
align-items: baseline; |
|
font-family: $font-family-sans-serif; |
|
|
|
a { |
|
color: $black; |
|
|
|
&:hover, |
|
&:focus { |
|
color: var(--primary, $brand-primary); |
|
} |
|
} |
|
|
|
.previous, |
|
.next { |
|
display: block; |
|
margin: 0 rem(26); |
|
font-family: $font-family-sans-serif; |
|
font-size: rem(16); |
|
|
|
svg { |
|
width: rem(16.2); |
|
height: rem(12.5); |
|
margin: 0 rem(6); |
|
|
|
path { |
|
fill: var(--primary, $brand-primary); |
|
} |
|
} |
|
} |
|
|
|
.pages { |
|
display: inline-block; |
|
border-bottom: solid 2px #ececec; |
|
|
|
a, |
|
span { |
|
display: inline-block; |
|
width: rem(41); |
|
padding: rem(8) 0; |
|
font-size: rem(24); |
|
text-align: center; |
|
} |
|
|
|
.current { |
|
border-bottom: solid rem(6) var(--primary, $brand-primary); |
|
} |
|
} |
|
} |
|
|
|
.filters, |
|
.search, |
|
.sort { |
|
width: 100%; |
|
border-top: solid 2px var(--accent, $brand-accent); |
|
background: $white; |
|
|
|
a { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
width: 100%; |
|
padding: rem(16) rem(19); |
|
font-size: rem(16); |
|
font-weight: 600; |
|
font-family: $font-family-sans-serif; |
|
letter-spacing: rem(0.67); |
|
color: $black; |
|
|
|
&:hover, |
|
&:focus { |
|
background: #fafdff; |
|
color: var(--primary, $brand-primary); |
|
} |
|
} |
|
|
|
.has-active-child > a { |
|
color: var(--primary, $brand-primary); |
|
} |
|
|
|
ul { |
|
margin: 0; |
|
padding: 0; |
|
list-style: none; |
|
|
|
li { |
|
font-size: rem(16); |
|
font-family: $font-family-sans-serif; |
|
letter-spacing: rem(0.67); |
|
|
|
a { |
|
display: flex; |
|
flex-direction: row; |
|
justify-content: space-between; |
|
align-items: center; |
|
font-weight: normal; |
|
cursor: pointer; |
|
|
|
.close { |
|
display: inline-block; |
|
float: right; |
|
margin-top: rem(-2); |
|
font-size: rem(20); |
|
opacity: 0; |
|
transition: opacity 0.5s; |
|
} |
|
} |
|
|
|
a.is-active { |
|
font-weight: 600; |
|
color: var(--primary, $brand-primary); |
|
|
|
.close { |
|
opacity: 1; |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
.arrow { |
|
path { |
|
fill: var(--primary, $brand-primary); |
|
} |
|
} |
|
|
|
.is-active > a .arrow { |
|
transform: rotate(180deg); |
|
} |
|
|
|
.filters { |
|
.filter-groups { |
|
display: none; |
|
border-top: solid 2px var(--accent, $brand-accent); |
|
|
|
h3 { |
|
margin: 0; |
|
border-top: solid 1px $light-gray; |
|
} |
|
|
|
h3:first-of-type { |
|
border-top: none; |
|
} |
|
} |
|
|
|
.licenses { |
|
display: none; |
|
} |
|
|
|
.filter-list { |
|
display: none; |
|
} |
|
|
|
&.is-active { |
|
.filter-groups, |
|
.licenses { |
|
display: block; |
|
} |
|
} |
|
|
|
.is-active ul { |
|
display: block; |
|
} |
|
} |
|
|
|
.search { |
|
display: none; |
|
} |
|
|
|
.sort { |
|
border-bottom: solid 2px var(--accent, $brand-accent); |
|
|
|
.sorts { |
|
display: none; |
|
border-top: solid 2px var(--accent, $brand-accent); |
|
} |
|
|
|
&.is-active { |
|
.sorts { |
|
display: block; |
|
} |
|
} |
|
} |
|
|
|
.books { |
|
align-self: flex-start; |
|
width: percent(358, 360); |
|
margin: rem(32) 0 0 percent(10.5, 360); |
|
padding: 0; |
|
} |
|
} |
|
|
|
@media (min-width: 768px) { |
|
.catalog { |
|
.controls { |
|
width: percent(706, 768); |
|
height: rem(52); |
|
margin: rem(60) percent(29, 768) rem(20) percent(33, 768); |
|
|
|
.filters, |
|
.search, |
|
.sort { |
|
position: relative; |
|
border-top: 0; |
|
border-bottom: solid 2px var(--accent, $brand-accent); |
|
z-index: 99; |
|
} |
|
|
|
.filters { |
|
float: left; |
|
width: rem(360); |
|
|
|
.filter-groups { |
|
border-right: solid 1px #ececec; |
|
border-left: solid 1px #ececec; |
|
} |
|
} |
|
|
|
.sort { |
|
float: right; |
|
width: rem(160); |
|
|
|
.sorts { |
|
border-right: solid 1px #ececec; |
|
border-bottom: solid 1px #ececec; |
|
border-left: solid 1px #ececec; |
|
} |
|
} |
|
} |
|
|
|
.books { |
|
align-self: flex-start; |
|
width: percent(735, 768); |
|
margin-bottom: rem(15); |
|
margin-left: percent(24, 768); |
|
} |
|
|
|
.book { |
|
width: percent(230, 735); |
|
height: rem(260); |
|
margin: 0 percent(15, 735) 2rem 0; |
|
padding: 0 rem(14) rem(21.35); |
|
|
|
&__subject { |
|
height: rem(45.85); |
|
font-size: rem(18); |
|
} |
|
|
|
&__title { |
|
height: rem(147.65); |
|
font-size: rem(22); |
|
font-weight: 600; |
|
line-height: (40/30); |
|
} |
|
|
|
&__read-more { |
|
font-size: rem(16); |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media (min-width: $medium) { |
|
.catalog { |
|
.page-header { |
|
h1 { |
|
font-size: rem(72); |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media #{$breakpoint-large} { |
|
.catalog { |
|
.banner { |
|
.container { |
|
height: rem(450); |
|
} |
|
|
|
.primary-navigation { |
|
height: 40px; |
|
} |
|
|
|
.brand { |
|
text-align: center; |
|
|
|
img { |
|
max-height: rem(60); |
|
} |
|
} |
|
} |
|
|
|
.page-header { |
|
height: rem(360); |
|
margin-top: rem(-360); |
|
} |
|
} |
|
} |
|
|
|
@media (min-width: $extra-large) { |
|
.catalog { |
|
.main { |
|
width: rem(1535); |
|
margin: 0 auto; |
|
} |
|
|
|
.network-catalog { |
|
margin-top: rem(205); |
|
} |
|
|
|
.controls { |
|
width: 100%; |
|
margin: 0 0 rem(64); |
|
|
|
.filters { |
|
width: rem(286); |
|
border-bottom: 0; |
|
|
|
> a { |
|
border-bottom: solid 3px var(--accent, $brand-accent); |
|
|
|
&:hover, |
|
&:focus { |
|
color: $black; |
|
background: $white; |
|
cursor: default; |
|
} |
|
|
|
.arrow { |
|
display: none; |
|
} |
|
} |
|
|
|
.filter-groups { |
|
display: block; |
|
border-right: 0; |
|
border-top: 0; |
|
border-left: 0; |
|
|
|
.subjects { |
|
border-bottom: solid 1px #ececec; |
|
} |
|
} |
|
|
|
.licenses { |
|
display: block; |
|
margin-top: rem(60); |
|
|
|
> a { |
|
background: var(--primary, $brand-primary); |
|
color: var(--primary-fg, $white); |
|
|
|
.arrow { |
|
path { |
|
fill: var(--primary-fg, $white); |
|
} |
|
} |
|
} |
|
} |
|
|
|
ul li { |
|
a { |
|
padding-top: 0; |
|
padding-bottom: 0; |
|
line-height: 2; |
|
} |
|
|
|
&:last-child a { |
|
padding-bottom: 1rem; |
|
} |
|
} |
|
} |
|
|
|
.sort { |
|
.sorts { |
|
border-top: solid 3px var(--accent, $brand-accent); |
|
border-right: 0; |
|
border-left: 0; |
|
} |
|
} |
|
} |
|
|
|
.books { |
|
width: percent(1221.5, 1535); |
|
margin: 0 0 0 percent(316, 1535); |
|
} |
|
|
|
.book { |
|
width: percent(367, 1221.5); |
|
height: rem(386); |
|
margin: 0 0 2rem percent(39.5, 1221.5); |
|
padding: 1.5rem 1.85rem 2.1875rem; |
|
|
|
&__subject { |
|
height: 4.625rem; |
|
font-size: rem(24); |
|
} |
|
|
|
&__title { |
|
height: 13rem; |
|
font-size: rem(30); |
|
font-weight: 500; |
|
line-height: (40/30); |
|
} |
|
|
|
&__read-more { |
|
font-size: rem(18); |
|
} |
|
} |
|
} |
|
} |
|
|
|
.catalog.no-js { |
|
.filters { |
|
.arrow { |
|
display: none; |
|
} |
|
|
|
.filter-groups, |
|
.licenses, |
|
.filter-list { |
|
display: block; |
|
} |
|
} |
|
|
|
.sort { |
|
.arrow { |
|
display: none; |
|
} |
|
|
|
.sorts { |
|
display: block; |
|
} |
|
} |
|
}
|
|
|