@rypen-dev/shared-components 5.0.14 → 5.0.16

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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/scss/_variables.scss +4 -2
  3. package/scss/partials/_layout.scss +8 -4
  4. package/scss/partials/_pills.scss +4 -0
  5. package/scss/partials/_tables.scss +12 -12
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.0.14",
4
+ "version": "5.0.16",
5
5
  "main": "./dist/index.js",
6
6
  "scripts": {
7
7
  "build": "webpack --config ./webpack.config.js",
package/scss/_variables.scss CHANGED
@@ -81,8 +81,9 @@ $input-highlight-color: $tertiary !default;
81
81
  $table-head-color: $dark-gray !default;
82
82
  $table-head-bg-color: $medium-gray !default;
83
83
  $table-head-selected-color: $body-font-color !default;
84
- $table-even-bg-color: $middle-gray !default;
85
- $table-odd-bg-color: $light-gray !default;
84
+ $table-even-bg-color: $light-gray !default;
85
+ $table-odd-bg-color: $middle-gray !default;
86
+ $table-row-highlight-color: $medium-gray !default;
86
87
  $table-text-color: $body-font-color !default;
87
88
  $table-mobile-label-color: $medium-gray !default;
88
89
 
@@ -142,6 +143,7 @@ $hero-image-url: "/studio/assets/images/hero.jpg" !default;
142
143
  $checkbox-image: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMzAgMzAiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjOGQ3YmNkIj4NCiAgICAgICAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik04IDE3bDUgNSA5LTEzIi8+DQogICAgPC9nPg0KPC9zdmc+DQo=" !default;
143
144
  $checkbox-image-disabled: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiB2aWV3Qm94PSIwIDAgMzAgMzAiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjZGNkNmU4Ij4NCiAgICAgICAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik04IDE3bDUgNSA5LTEzIi8+DQogICAgPC9nPg0KPC9zdmc+DQo=" !default;
144
145
  $checkbox-image-secondary: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiB2aWV3Qm94PSIwIDAgMzAgMzAiPg0KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlPSIjYTZkNmQ2Ij4NCiAgICAgICAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjMiIGQ9Ik04IDE3bDUgNSA5LTEzIi8+DQogICAgPC9nPg0KPC9zdmc+DQo=" !default;
146
+ $checkbox-image-tertiary: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iMCAwIDMwIDMwIj4NCiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI2IxYTBlMCI+DQogICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNOCAxN2w1IDUgOS0xMyIvPg0KICAgIDwvZz4NCjwvc3ZnPg0K" !default;
145
147
  $checkbox-image-warning: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDMwIDMwIj4NCiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iI2ZmYjUzYiI+DQogICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNOCAxN2w1IDUgOS0xMyIvPg0KICAgIDwvZz4NCjwvc3ZnPg0K" !default;
146
148
  $checkbox-image-success-alt: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDMwIDMwIj4NCiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZT0iIzNBOEE4MSI+DQogICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzIiBkPSJNOCAxN2w1IDUgOS0xMyIvPg0KICAgIDwvZz4NCjwvc3ZnPg0K" !default;
147
149
 
package/scss/partials/_layout.scss CHANGED
@@ -176,10 +176,6 @@ hr {
176
176
  margin: 1rem 0;
177
177
  border-bottom: solid 3px $medium-gray;
178
178
 
179
- &.large {
180
- margin: 2rem 0;
181
- }
182
-
183
179
  &.no-space {
184
180
  margin: 0;
185
181
  }
@@ -195,6 +191,14 @@ hr {
195
191
  &.large {
196
192
  margin: 40px 0;
197
193
  }
194
+
195
+ &.extra-large {
196
+ margin: 60px 0;
197
+
198
+ @media (min-width: map-get($breakpoints, medium)) {
199
+ margin: 80px 0;
200
+ }
201
+ }
198
202
 
199
203
  &.short {
200
204
  width: 80px;
package/scss/partials/_pills.scss CHANGED
@@ -189,6 +189,10 @@
189
189
  }
190
190
  }
191
191
 
192
+ &.floating {
193
+ box-shadow: 0 6px 17px 1px fade-out($secondary-alt, 0.35) !important;
194
+ }
195
+
192
196
  &.large {
193
197
  font-size: 1.25rem;
194
198
  line-height: 3.5rem;
package/scss/partials/_tables.scss CHANGED
@@ -118,33 +118,33 @@ div.table {
118
118
  cursor: pointer;
119
119
 
120
120
  > .table-cell {
121
- border-top: solid 1px $light-gray;
122
- border-bottom: solid 1px $light-gray;
121
+ border-top: solid 1px $table-odd-bg-color;
122
+ border-bottom: solid 1px $table-odd-bg-color;
123
123
 
124
124
  &:first-child,
125
125
  &.first {
126
- border-left: solid 1px $light-gray;
126
+ border-left: solid 1px $table-odd-bg-color;
127
127
  }
128
128
 
129
129
  &:last-child,
130
130
  &.last {
131
- border-right: solid 1px $light-gray;
131
+ border-right: solid 1px $table-odd-bg-color;
132
132
  }
133
133
  }
134
134
 
135
135
  &:nth-child(even) {
136
136
  > .table-cell {
137
- border-top-color: $middle-gray;
138
- border-bottom-color: $middle-gray;
137
+ border-top-color: $table-even-bg-color;
138
+ border-bottom-color: $table-even-bg-color;
139
139
 
140
140
  &:first-child,
141
141
  &.first {
142
- border-left-color: $middle-gray;
142
+ border-left-color: $table-odd-bg-color;
143
143
  }
144
144
 
145
145
  &:last-child,
146
146
  &.last {
147
- border-right-color: $middle-gray;
147
+ border-right-color: $table-odd-bg-color;
148
148
  }
149
149
  }
150
150
  }
@@ -152,17 +152,17 @@ div.table {
152
152
  &:hover,
153
153
  &:focus {
154
154
  > .table-cell {
155
- border-top-color: $medium-gray !important;
156
- border-bottom-color: $medium-gray !important;
155
+ border-top-color: $table-row-highlight-color !important;
156
+ border-bottom-color: $table-row-highlight-color !important;
157
157
 
158
158
  &:first-child,
159
159
  &.first {
160
- border-left-color: $medium-gray !important;
160
+ border-left-color: $table-row-highlight-color !important;
161
161
  }
162
162
 
163
163
  &:last-child,
164
164
  &.last {
165
- border-right-color: $medium-gray !important;
165
+ border-right-color: $table-row-highlight-color !important;
166
166
  }
167
167
  }
168
168
  }