@castlabs/ui 7.18.0 → 7.19.1

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 (14) hide show
  1. package/dist/castlabs-ui.common.js +3 -3
  2. package/dist/castlabs-ui.common.js.map +1 -1
  3. package/dist/castlabs-ui.core.js +82 -40
  4. package/dist/castlabs-ui.css +1 -1
  5. package/dist/castlabs-ui.module.js +82 -40
  6. package/dist/castlabs-ui.umd.js +4 -4
  7. package/dist/castlabs-ui.umd.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/components/form/ClFieldInput/style.scss +17 -0
  10. package/src/styles/abstracts/button.scss +1 -1
  11. package/src/styles/abstracts/color.scss +1 -2
  12. package/src/styles/abstracts/typography.scss +4 -2
  13. package/src/styles/layout/meta.scss +1 -1
  14. package/dist/select-disabled.dark.1065ea4c.svg +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@castlabs/ui",
3
- "version": "7.18.0",
3
+ "version": "7.19.1",
4
4
  "repository": "https://github.com/castlabs/ui-styleguide",
5
5
  "private": false,
6
6
  "description": "A vanilla HTML/CS/JS & Vue.js component library for Castlabs.",
package/src/components/form/ClFieldInput/style.scss CHANGED
@@ -35,6 +35,8 @@
35
35
  [type='date'],
36
36
  [type='time'],
37
37
  [type='datetime-local'] {
38
+ appearance: none; // required for full-width on iOS; loses native calendar/clock icon
39
+ display: block; // overrides inline-block on .cl-form input (line 13) so width:100% works on iOS
38
40
  @extend %form-field-box;
39
41
  @extend %form-field-typography-monospace;
40
42
 
@@ -60,6 +62,21 @@
60
62
  }
61
63
  }
62
64
 
65
+ [type='date'],
66
+ [type='time'],
67
+ [type='datetime-local'] {
68
+ padding-block: calc(($form-field-min-height - $form-field-fontsize * $form-field-line-height) / 2 - #{$brand-line-width}); // vertical centering on iOS
69
+
70
+ &::-webkit-datetime-edit-fields-wrapper {
71
+ padding: 0;
72
+ }
73
+
74
+ &::-webkit-datetime-edit {
75
+ line-height: 1;
76
+ padding-block: 0;
77
+ }
78
+ }
79
+
63
80
  textarea {
64
81
  border-bottom-right-radius: px(5);
65
82
  }
package/src/styles/abstracts/button.scss CHANGED
@@ -88,7 +88,7 @@
88
88
  &:not([class*=' cl-color-']) {
89
89
  // default button color
90
90
  #{'--cl-color-background'}: $color-ci-sea;
91
- #{'--cl-color-text'}: $color-ci-eggshell;
91
+ #{'--cl-color-text'}: var(--cl-color-text);
92
92
  #{'--cl-color-border'}: $color-ci-sea;
93
93
  }
94
94
  }
package/src/styles/abstracts/color.scss CHANGED
@@ -15,8 +15,7 @@ $color-ci-eggshell: #fbf9f2; // rgba(251, 249, 242, 1);
15
15
  $color-ci-night: #262a35; // rgba(38, 42, 53, 1);
16
16
 
17
17
  $color-ci-night-2: #333947; // also night-haze
18
- $color-ci-night-3: #3c4253;
19
- $color-ci-night-4: #454c5f;
18
+ $color-ci-night-3: #3c4253; // app drawer, highight
20
19
 
21
20
  $color-ci-clay: #cfc8c8; // rgba(207, 200, 200, 1);
22
21
  $color-ci-ash: #6d5e5e; // rgba(109, 94, 94, 1);
package/src/styles/abstracts/typography.scss CHANGED
@@ -82,13 +82,15 @@ $typography-monospace-line-height: 1.375;
82
82
  ) {
83
83
  color: $color;
84
84
  display: inline;
85
- text-decoration: underline $color-underline;
85
+ text-decoration-color: $color-underline;
86
+ text-decoration-line: underline;
86
87
  text-decoration-thickness: px(1);
87
88
 
88
89
  &:hover {
89
90
  color: $color-hover;
90
91
  cursor: pointer;
91
- text-decoration: underline $color-underline-hover;
92
+ text-decoration-color: $color-underline-hover;
93
+ text-decoration-line: underline;
92
94
  }
93
95
  }
94
96
 
package/src/styles/layout/meta.scss CHANGED
@@ -1,3 +1,3 @@
1
1
  :root {
2
- #{'--cl-version'}: 'v7.18.0';
2
+ #{'--cl-version'}: 'v7.19.1';
3
3
  }
package/dist/select-disabled.dark.1065ea4c.svg DELETED
@@ -1 +0,0 @@
1
- <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m2 5 6 6 6-6'/></svg>