123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- /**
- * @file
- * Cards list.
- */
- @import "../base/variables.pcss.css";
- :root {
- --card-list-spacing: var(--space-m);
- /* Using 100% as base causes issues in IE11. */
- --cards-two-cols-width: calc(((99.9% + var(--card-list-spacing)) / 2) - var(--card-list-spacing));
- --cards-three-cols-width: calc(((99.9% + var(--card-list-spacing)) / 3) - var(--card-list-spacing));
- --cards-four-cols-width: calc(((99.9% + var(--card-list-spacing)) / 4) - var(--card-list-spacing));
- }
- .card-list {
- display: flex;
- flex-direction: column;
- }
- .card-list--two-cols,
- .card-list--four-cols {
- flex-direction: row;
- flex-wrap: wrap;
- align-items: stretch;
- justify-content: flex-start;
- }
- .card-list__item {
- box-sizing: border-box;
- margin-bottom: var(--card-list-spacing);
- }
- .card-list--two-cols .card-list__item,
- .card-list--four-cols .card-list__item {
- flex-basis: 100%;
- }
- /* 36.75rem theme screenshot width */
- @media screen and (min-width: 36.75rem) {
- .card-list--four-cols .card-list__item {
- flex-basis: var(--cards-two-cols-width);
- max-width: var(--cards-two-cols-width);
- }
- .card-list--four-cols .card-list__item {
- margin-right: var(--card-list-spacing);
- }
- [dir="rtl"] .card-list--four-cols .card-list__item {
- margin-right: 0;
- margin-left: var(--card-list-spacing);
- }
- .card-list--four-cols .card-list__item:nth-child(even) {
- margin-right: 0;
- }
- [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
- margin-right: 0;
- margin-left: 0;
- }
- }
- /* 53.75rem it is width of screenshot image + toolbar width(15rem) + 2rem of margins. */
- @media screen and (max-width: 53.75rem) {
- .toolbar-tray-open.toolbar-vertical.toolbar-fixed .card-list--four-cols .card-list__item {
- flex-basis: 100%;
- max-width: 100%;
- margin-right: 0;
- margin-left: 0;
- }
- }
- @media screen and (min-width: 70rem) {
- .card-list--four-cols .card-list__item {
- flex-basis: var(--cards-three-cols-width);
- max-width: var(--cards-three-cols-width);
- }
- .card-list--four-cols .card-list__item:nth-child(even) {
- margin-right: var(--card-list-spacing);
- }
- [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
- margin-right: 0;
- margin-left: var(--card-list-spacing);
- }
- .card-list--four-cols .card-list__item:nth-child(3n) {
- margin-right: 0;
- }
- [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
- margin-right: 0;
- margin-left: 0;
- }
- }
- @media screen and (min-width: 85.375rem) {
- .card-list--two-cols .card-list__item {
- flex-basis: var(--cards-two-cols-width);
- max-width: var(--cards-two-cols-width);
- margin-right: var(--card-list-spacing);
- }
- [dir="rtl"] .card-list--two-cols .card-list__item {
- margin-right: 0;
- margin-left: var(--card-list-spacing);
- }
- .card-list--two-cols .card-list__item:nth-child(even) {
- margin-right: 0;
- }
- [dir="rtl"] .card-list--two-cols .card-list__item:nth-child(even) {
- margin-right: 0;
- margin-left: 0;
- }
- .card-list--four-cols .card-list__item {
- flex-basis: var(--cards-four-cols-width);
- max-width: var(--cards-four-cols-width);
- }
- .card-list--four-cols .card-list__item:nth-child(even) {
- margin-right: var(--card-list-spacing);
- }
- [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(even) {
- margin-right: 0;
- margin-left: var(--card-list-spacing);
- }
- .card-list--four-cols .card-list__item:nth-child(3n) {
- margin-right: var(--card-list-spacing);
- }
- [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(3n) {
- margin-right: 0;
- margin-left: var(--card-list-spacing);
- }
- .card-list--four-cols .card-list__item:nth-child(4n) {
- margin-right: 0;
- }
- [dir="rtl"] .card-list--four-cols .card-list__item:nth-child(4n) {
- margin-right: 0;
- margin-left: 0;
- }
- }
|