mCSS/dist/css/component.pagination.css at 071b00fdb796b2f3a01f2087b9bfb256200873de · minimaldesign/mCSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
/*! mCSS v1.4.0 | MIT | https://mcss.dev */
/*
SETTINGS MEDIA QUERIES

https://github.com/argyleink/open-props/blob/main/src/props.media.css
https://open-props.style/#media-queries

Can't use var() inside media queries 🤦‍♂️
https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries/47212942#47212942
so breakpoints are not in theme.default.tokens.css

xxs: 240px
xs: 360px
sm: 480px
md: 768px
lg: 1024px
xl: 1440px
xxl: 1920px
*/

/* https://github.com/postcss/postcss-mixins */

/* Example */

/* truncate single line of text and adds … */

@layer components {
/* PAGINATION */

.pagination {
  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--xs1);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  a,
  span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-size);
    min-height: var(--pagination-size);
    font-size: var(--text-sm);
    font-weight: var(--semi-bold);
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--pagination-color);
    border-radius: var(--pagination-border-radius);
    transition: background-color var(--transition-fast);
  }

  a:hover {
    background-color: var(--pagination-background-color-hover);
  }

  a[aria-current="page"] {
    color: var(--pagination-color-current);
    background-color: var(--pagination-background-color-current);
  }
}

.pagination_arrow {
  svg {
    width: var(--sm1);
    height: var(--sm1);
  }

  &[aria-disabled="true"] {
    opacity: var(--o-2);
  }
}

.pagination_arrow-prev svg {
  rotate: 90deg;
}

.pagination_arrow-next svg {
  rotate: -90deg;
}

}