@rypen-dev/shared-components 5.2.6 → 5.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rypen-dev/shared-components",
3
3
  "description": "Shared styles and Vuejs ui components for Rypen projects.",
4
- "version": "5.2.6",
4
+ "version": "5.2.7",
5
5
  "main": "./dist/index.js",
6
6
  "scripts": {
7
7
  "build": "webpack --config ./webpack.config.js",
@@ -146,6 +146,11 @@ $enterprise-color: $quaternary !default;
146
146
 
147
147
  $secondary-pill-color: $secondary !default;
148
148
 
149
+ $pagination-text-color: $primary !default;
150
+ $pagination-current-color: $tertiary !default;
151
+ $pagination-hover-color: $middle-gray !default;
152
+ $pagination-disabled-color: $text-gray !default;
153
+
149
154
  // Images
150
155
  $hero-image-url: "/studio/assets/images/hero.jpg" !default;
151
156
 
@@ -1558,6 +1558,7 @@ body.hover-capable {
1558
1558
 
1559
1559
  .input-container.with-decoy {
1560
1560
  position: relative;
1561
+ padding-top: 0;
1561
1562
  margin: 0 20px 29px 0;
1562
1563
 
1563
1564
  input {
@@ -7,4 +7,153 @@ nav > ul {
7
7
  margin: 0;
8
8
  padding: 0;
9
9
  display: flex;
10
+ }
11
+
12
+ // roll our own pagination based on foundation
13
+ .pagination {
14
+ margin-bottom: 1rem;
15
+
16
+ li {
17
+ margin-right: 2px;
18
+ font-size: 0.875rem;
19
+ display: inline-block;
20
+ color: $pagination-text-color;
21
+
22
+ &.pagination-previous {
23
+ a,
24
+ span {
25
+ span::before {
26
+ content: '\AB';
27
+ display: inline-block;
28
+ margin-right: 6px;
29
+ }
30
+ }
31
+ }
32
+
33
+ &.pagination-next {
34
+ a,
35
+ span {
36
+ span::after {
37
+ content: '\BB';
38
+ display: inline-block;
39
+ margin-left: 6px;
40
+ }
41
+ }
42
+ }
43
+
44
+ &.ellipsis::after {
45
+ display: block;
46
+ content: '\2026';
47
+ padding: 3px 10px;
48
+ }
49
+
50
+ &.current {
51
+ background-color: $pagination-current-color;
52
+ padding: 3px 10px;
53
+
54
+ span,
55
+ a {
56
+ color: $white;
57
+ padding: 0;
58
+ }
59
+ }
60
+
61
+ &.disabled {
62
+ color: $pagination-disabled-color;
63
+
64
+ span {
65
+ color: $pagination-disabled-color;
66
+ }
67
+ }
68
+ }
69
+
70
+ span,
71
+ a {
72
+ display: block;
73
+ padding: 3px 10px;
74
+ color: $pagination-text-color;
75
+
76
+ &.disabled {
77
+ color: $pagination-disabled-color;
78
+ }
79
+
80
+ span {
81
+ display: inline-block;
82
+ padding: 0;
83
+ }
84
+ }
85
+
86
+ a:hover {
87
+ background-color: $pagination-hover-color;
88
+ }
89
+
90
+ @media (max-width: map-get($breakpoints, medium) - 1px) {
91
+ li {
92
+ &:first-child {
93
+ padding-left: 0 !important;
94
+
95
+ a,
96
+ span {
97
+ padding-left: 0 !important;
98
+ }
99
+ }
100
+
101
+ &:last-child {
102
+ padding-right: 0 !important;
103
+
104
+ a,
105
+ span {
106
+ padding-right: 0 !important;
107
+ }
108
+ }
109
+
110
+ &.pagination-previous,
111
+ &.pagination-next {
112
+ > a,
113
+ > span {
114
+ span {
115
+ display: none;
116
+ }
117
+ }
118
+ }
119
+
120
+ &.pagination-previous {
121
+ > a,
122
+ > span {
123
+ &::before {
124
+ content: '\AB';
125
+ display: inline-block;
126
+ margin-right: 6px;
127
+ }
128
+ }
129
+ }
130
+
131
+ &.pagination-next {
132
+ > a,
133
+ > span {
134
+ &::after {
135
+ content: '\BB';
136
+ display: inline-block;
137
+ margin-left: 6px;
138
+ }
139
+ }
140
+ }
141
+
142
+ &.ellipsis::after {
143
+ padding-left: 8px;
144
+ padding-right: 8px;
145
+ }
146
+
147
+ &.current {
148
+ padding-left: 8px;
149
+ padding-right: 8px;
150
+ }
151
+
152
+ span,
153
+ a {
154
+ padding-left: 8px;
155
+ padding-right: 8px;
156
+ }
157
+ }
158
+ }
10
159
  }