@rypen-dev/shared-components 5.2.5 → 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.5",
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
 
@@ -515,7 +515,7 @@ label {
515
515
  .input-group {
516
516
  > .input-group-label:last-child,
517
517
  > .input-group-field:last-child {
518
- border-radius: 0 $input-radius $input-radius 0;
518
+ border-radius: 0 $global-form-input-radius $global-form-input-radius 0;
519
519
  }
520
520
 
521
521
  &.tiny {
@@ -960,7 +960,7 @@ label {
960
960
  background-color: $middle-gray;
961
961
  padding-left: 8px;
962
962
  padding-right: 8px;
963
- border-radius: 5px;
963
+ border-radius: $global-form-input-radius;
964
964
 
965
965
  &.tiny {
966
966
  padding-left: 5px;
@@ -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 {
@@ -2115,7 +2116,7 @@ input:checked ~ .switch-paddle {
2115
2116
  position: relative;
2116
2117
 
2117
2118
  &.suggestions > input[type='text'] {
2118
- border-radius: $global-radius $global-radius 0 0;
2119
+ border-radius: $global-form-input-radius $global-form-input-radius 0 0;
2119
2120
  }
2120
2121
 
2121
2122
  &.loading .mini-loader {
@@ -2158,7 +2159,7 @@ input:checked ~ .switch-paddle {
2158
2159
  background-color: $input-background-color;
2159
2160
  border: solid 1px $input-border-focus-color;
2160
2161
  border-top: 0;
2161
- border-radius: 0 0 $global-radius $global-radius;
2162
+ border-radius: 0 0 $global-form-input-radius $global-form-input-radius;
2162
2163
  padding: 0 10px 0.625rem;
2163
2164
  margin-top: -1px;
2164
2165
  z-index: 10;
@@ -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
  }