@castlabs/ui 7.0.2 → 7.0.3

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 (23) hide show
  1. package/dist/castlabs-ui.common.js +1 -1
  2. package/dist/castlabs-ui.css +2 -2
  3. package/dist/castlabs-ui.umd.js +6 -6
  4. package/package.json +1 -1
  5. package/src/components/ClAlert/style.scss +0 -4
  6. package/src/components/ClButton/style.scss +2 -0
  7. package/src/components/ClDropdown/style.scss +1 -1
  8. package/src/components/ClDropzone/style.scss +1 -1
  9. package/src/components/ClFooter/style.scss +1 -0
  10. package/src/components/ClList/style.variables.scss +1 -2
  11. package/src/components/ClTooltip/style.scss +44 -0
  12. package/src/components/form/ClField/style.scss +1 -2
  13. package/src/components/form/ClFieldCheck/style.scss +2 -4
  14. package/src/components/form/ClFieldFile/style.scss +3 -3
  15. package/src/components/form/ClFieldGroup/style.scss +60 -38
  16. package/src/components/form/ClFieldInput/style.scss +2 -9
  17. package/src/components/form/ClFieldSelect/style.scss +1 -1
  18. package/src/components/navigation/ClNavSide/ClNavDrawer/style.scss +5 -4
  19. package/src/components/table/ClTable/style.variables.scss +2 -14
  20. package/src/components/text/ClLinkExternal/style.scss +2 -0
  21. package/src/styles/components/form.variables.scss +6 -6
  22. package/src/styles/layout/typography.variables.scss +2 -2
  23. package/src/styles/vendors/castlabs.scss +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@castlabs/ui",
3
- "version": "7.0.2",
3
+ "version": "7.0.3",
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/ClAlert/style.scss CHANGED
@@ -36,10 +36,6 @@
36
36
  color: $color-attention;
37
37
  content: '\f057';
38
38
  }
39
-
40
- a {
41
- color: $color-attention;
42
- }
43
39
  }
44
40
 
45
41
  &.cl-alert-warning {
package/src/components/ClButton/style.scss CHANGED
@@ -48,8 +48,10 @@
48
48
  @extend %cl-a-btn;
49
49
 
50
50
  @include typography-link($color-text, $color-ci-red, 0);
51
+ @include cl-color-focus-outline(var(--cl-color-focus), 2px);
51
52
 
52
53
  border: 0;
54
+ border-radius: 0;
53
55
  font-weight: 500;
54
56
  line-height: 1;
55
57
  margin-left: $spacing-tiny;
package/src/components/ClDropdown/style.scss CHANGED
@@ -77,7 +77,7 @@ $dropdown-line-height: 1.25em;
77
77
  padding-bottom: $spacing-tiny;
78
78
 
79
79
  summary {
80
- border-bottom: 2px solid $color-ci-white;
80
+ border-bottom: $brand-line-width solid $color-ci-white;
81
81
  margin-bottom: $spacing-tiny;
82
82
 
83
83
  &::after {
package/src/components/ClDropzone/style.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  border: px(2) dashed $color-ci-clay;
3
3
  border-radius: $brand-border-radius;
4
4
  cursor: pointer;
5
- padding: $spacing-tiny;
5
+ padding: $spacing-tiny $spacing-small;
6
6
  text-align: center;
7
7
 
8
8
  i {
package/src/components/ClFooter/style.scss CHANGED
@@ -13,6 +13,7 @@
13
13
 
14
14
  a {
15
15
  @include typography-link(var(--cl-color-text), $color-ci-red, 0);
16
+ @include cl-color-focus-outline(var(--cl-color-focus), 2px);
16
17
 
17
18
  &:hover {
18
19
  text-decoration: underline;
package/src/components/ClList/style.variables.scss CHANGED
@@ -94,9 +94,8 @@ $list-dt-width: 14rem;
94
94
 
95
95
  %cl-dl {
96
96
  dt {
97
- @extend %cl-p-form-label;
98
-
99
97
  display: block;
98
+ font-weight: 500;
100
99
  }
101
100
 
102
101
  dd {
package/src/components/ClTooltip/style.scss CHANGED
@@ -28,4 +28,48 @@
28
28
  color: var(--cl-color-text);
29
29
  }
30
30
  }
31
+
32
+ &.cl-tooltip-primary, // deprecated legacy name
33
+ &.cl-tooltip-red {
34
+ #{'--cl-color-background'}: $color-ci-red;
35
+ #{'--cl-color-text'}: $color-ci-eggshell;
36
+ }
37
+
38
+ &.cl-tooltip-secondary, // deprecated legacy name
39
+ &.cl-tooltip-sky {
40
+ #{'--cl-color-background'}: $color-ci-sky;
41
+ #{'--cl-color-text'}: $color-ci-night;
42
+ }
43
+
44
+ &.cl-tooltip-dark, // deprecated legacy name
45
+ &.cl-tooltip-night {
46
+ #{'--cl-color-background'}: $color-ci-night;
47
+ #{'--cl-color-text'}: $color-ci-eggshell;
48
+ }
49
+
50
+ &.cl-tooltip-light, // deprecated legacy name
51
+ &.cl-tooltip-clay {
52
+ #{'--cl-color-background'}: $color-ci-clay;
53
+ #{'--cl-color-text'}: $color-ci-night;
54
+ }
55
+
56
+ &.cl-tooltip-eggshell {
57
+ #{'--cl-color-background'}: $color-ci-eggshell;
58
+ #{'--cl-color-text'}: $color-ci-night;
59
+ }
60
+
61
+ &.cl-tooltip-ash {
62
+ #{'--cl-color-background'}: $color-ci-ash;
63
+ #{'--cl-color-text'}: $color-ci-eggshell;
64
+ }
65
+
66
+ &.cl-tooltip-berry {
67
+ #{'--cl-color-background'}: $color-ci-berry;
68
+ #{'--cl-color-text'}: $color-ci-eggshell;
69
+ }
70
+
71
+ &.cl-tooltip-petrol {
72
+ #{'--cl-color-background'}: $color-ci-petrol;
73
+ #{'--cl-color-text'}: $color-ci-eggshell;
74
+ }
31
75
  }
package/src/components/form/ClField/style.scss CHANGED
@@ -8,8 +8,7 @@
8
8
 
9
9
  [invalid],
10
10
  .invalid {
11
- border-color: $color-attention;
12
- // color: $color-attention;
11
+ border-color: $color-attention !important;
13
12
 
14
13
  + * + .invalid-feedback,
15
14
  + .invalid-feedback {
package/src/components/form/ClFieldCheck/style.scss CHANGED
@@ -17,10 +17,6 @@ $form-check-background: $color-ci-eggshell;
17
17
  margin-top: $spacing-tiny + $spacing-micro;
18
18
  }
19
19
 
20
- .form-check-label {
21
- padding-top: px(1);
22
- }
23
-
24
20
  .form-check-input {
25
21
  margin-left: -$spacing-medium;
26
22
  margin-right: $spacing-micro;
@@ -29,6 +25,7 @@ $form-check-background: $color-ci-eggshell;
29
25
  &[type='checkbox'] {
30
26
  border: $form-field-border;
31
27
  border-radius: px(4);
28
+ margin-top: 0.2em;
32
29
 
33
30
  &:checked {
34
31
  background-color: $color-selected;
@@ -52,6 +49,7 @@ $form-check-background: $color-ci-eggshell;
52
49
 
53
50
  &[type='radio'] {
54
51
  border: $form-field-border;
52
+ margin-top: 0.2em;
55
53
 
56
54
  &:checked {
57
55
  background-color: $color-selected;
package/src/components/form/ClFieldFile/style.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  @extend %form-field-box;
11
11
  @extend %form-field-typography-sans;
12
12
 
13
- @include form-focus;
13
+ @include cl-form-focus;
14
14
 
15
15
  &.cl-file {
16
16
  border: 0;
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  &:focus + .cl-file-companion {
25
- @include form-focus-embed();
25
+ @include cl-form-focus-embed();
26
26
  @include cl-color-focus-outline-raw;
27
27
  }
28
28
 
@@ -62,7 +62,7 @@
62
62
  @extend %form-field-box;
63
63
  @extend %form-field-typography-sans;
64
64
 
65
- @include form-focus;
65
+ @include cl-form-focus;
66
66
 
67
67
  letter-spacing: 0;
68
68
  text-transform: none;
package/src/components/form/ClFieldGroup/style.scss CHANGED
@@ -30,19 +30,21 @@
30
30
  z-index: 1; // needed so the focused element's border is always on top
31
31
  }
32
32
 
33
- &:not(.btn) + * {
34
- // trick to share one ][ border between 2 inputs
35
- &:not(.btn) {
36
- border-left-width: 0;
37
-
38
- &:focus,
39
- &.invalid:focus {
40
- box-shadow: -$brand-line-width 0 0 $color-focus !important; // sass-lint:disable-line no-important
33
+ @include media-breakpoint-up(sm) {
34
+ &:not(.btn) + * {
35
+ // trick to share one ][ border between 2 inputs
36
+ &:not(.btn) {
37
+ border-left-width: 0;
38
+
39
+ &:focus,
40
+ &.invalid:focus {
41
+ box-shadow: -$brand-line-width 0 0 $color-focus !important; // sass-lint:disable-line no-important
42
+ }
41
43
  }
42
- }
43
44
 
44
- &.invalid {
45
- box-shadow: -$brand-line-width 0 0 $color-attention !important; // sass-lint:disable-line no-important
45
+ &.invalid {
46
+ box-shadow: -$brand-line-width 0 0 $color-attention !important; // sass-lint:disable-line no-important
47
+ }
46
48
  }
47
49
  }
48
50
  }
@@ -62,38 +64,58 @@
62
64
  width: auto;
63
65
  }
64
66
 
65
- // --- un-round left sides ------------------------------------------------------
66
- .input-group-text .form-control {
67
- border-bottom-left-radius: $brand-border-radius;
68
- border-top-left-radius: $brand-border-radius;
69
- }
67
+ @include media-breakpoint-down(sm) {
68
+ flex-direction: column;
70
69
 
71
- .input-group-text + .form-control,
72
- .form-control + .form-control,
73
- .form-control + p + .form-control,
74
- .form-control + p + p + .form-control {
75
- border-bottom-left-radius: 0;
76
- border-top-left-radius: 0;
77
- }
70
+ > * {
71
+ width: 100% !important;
78
72
 
79
- // --- un-round right sides ------------------------------------------------------
80
- .input-group-text:first-child,
81
- .form-control:first-child {
82
- border-bottom-right-radius: 0;
83
- border-top-right-radius: 0;
84
- }
73
+ &:not(:first-child) {
74
+ margin-top: $spacing-tiny;
75
+ }
85
76
 
86
- .form-control + .form-control,
87
- .form-control + p + .form-control,
88
- .form-control + p + p + .form-control {
89
- border-bottom-right-radius: 0;
90
- border-top-right-radius: 0;
77
+ &.btn {
78
+ font-size: 0.75em;
79
+ margin-left: 0 !important;
80
+ }
81
+ }
91
82
  }
92
83
 
93
- > .cl-last-child,
94
- > :last-child {
95
- border-bottom-right-radius: $brand-border-radius !important;
96
- border-top-right-radius: $brand-border-radius !important;
84
+ @include media-breakpoint-up(sm) {
85
+ > .input-group-text,
86
+ > .form-control {
87
+ border-radius: 0;
88
+
89
+ &:first-of-type {
90
+ border-bottom-left-radius: $brand-border-radius;
91
+ border-top-left-radius: $brand-border-radius;
92
+ }
93
+
94
+ &:last-of-type {
95
+ border-bottom-right-radius: $brand-border-radius;
96
+ border-top-right-radius: $brand-border-radius;
97
+ }
98
+ }
99
+
100
+ .input-group-text + .form-control,
101
+ .form-control + .form-control,
102
+ .form-control + p + .form-control,
103
+ .form-control + p + p + .form-control {
104
+ border-bottom-left-radius: 0;
105
+ border-top-left-radius: 0;
106
+ }
107
+
108
+ .input-group-text:has(+ .form-control),
109
+ .form-control:has(+ .form-control),
110
+ .form-control:has(+ p + .form-control),
111
+ .form-control:has(+ p + p + .form-control) {
112
+ border-bottom-right-radius: 0;
113
+ border-top-right-radius: 0;
114
+
115
+ &:not(.btn) {
116
+ border-right-color: $color-ci-clay;
117
+ }
118
+ }
97
119
  }
98
120
  }
99
121
  }
package/src/components/form/ClFieldInput/style.scss CHANGED
@@ -36,7 +36,7 @@
36
36
  @extend %form-field-box;
37
37
  @extend %form-field-typography-monospace;
38
38
 
39
- @include form-focus;
39
+ @include cl-form-focus;
40
40
 
41
41
  &.form-control-plaintext {
42
42
  background-color: transparent;
@@ -79,7 +79,6 @@
79
79
 
80
80
  [type='range'] {
81
81
  $color-bullet: $color-ci-night;
82
- $color-bullet-focus: $color-ci-berry;
83
82
 
84
83
  appearance: none;
85
84
  background: $color-ci-clay;
@@ -110,13 +109,7 @@
110
109
  }
111
110
 
112
111
  &:focus {
113
- &::-webkit-slider-thumb {
114
- background: $color-bullet-focus;
115
- }
116
-
117
- &::-moz-range-thumb {
118
- background: $color-bullet-focus;
119
- }
112
+ @include cl-color-focus-outline(var(--cl-color-focus), 2px);
120
113
  }
121
114
  }
122
115
  }
package/src/components/form/ClFieldSelect/style.scss CHANGED
@@ -16,7 +16,7 @@
16
16
  @extend %form-field-box;
17
17
  @extend %form-field-typography-monospace;
18
18
 
19
- @include form-focus;
19
+ @include cl-form-focus;
20
20
 
21
21
  display: block;
22
22
 
package/src/components/navigation/ClNavSide/ClNavDrawer/style.scss CHANGED
@@ -217,7 +217,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
217
217
  padding-bottom: $spacing-tiny;
218
218
 
219
219
  summary {
220
- border-bottom: 2px solid $color-ci-clay;
220
+ border-bottom: $brand-line-width solid $sidenav-color-separator;
221
221
  margin-bottom: $spacing-tiny;
222
222
  }
223
223
 
@@ -230,6 +230,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
230
230
  .cl-dropdown-item {
231
231
  @include cl-color-focus-outline(var(--cl-color-text));
232
232
 
233
+ color: var(--cl-color-text);
233
234
  line-height: 1;
234
235
  padding: $spacing-small;
235
236
 
@@ -248,7 +249,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
248
249
  }
249
250
 
250
251
  &:hover:not(.active) {
251
- background-color: $color-ci-night;
252
+ background-color: $color-ci-red;
252
253
  }
253
254
  }
254
255
 
@@ -303,7 +304,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
303
304
  }
304
305
 
305
306
  &:hover {
306
- background-color: var(--cl-color-highlight);
307
+ color: $color-ci-red;
307
308
  }
308
309
 
309
310
  &.active {
@@ -348,7 +349,7 @@ $sidenav-color-app: #3b4253; // color.adjust($sidenav-color-account, $lightness:
348
349
 
349
350
  &[open] {
350
351
  summary {
351
- border-bottom: 1px solid $sidenav-color-separator;
352
+ border-bottom: $brand-line-width solid $sidenav-color-separator;
352
353
  }
353
354
  }
354
355
 
package/src/components/table/ClTable/style.variables.scss CHANGED
@@ -136,19 +136,7 @@ $table-lineheight: 1.2em;
136
136
  }
137
137
 
138
138
  %cl-table-data-light {
139
- tbody {
140
- tr {
141
- &:nth-child(odd) td {
142
- background-color: $color-ci-eggshell;
143
- }
144
- }
145
- }
146
-
147
- tr:nth-child(odd) .cl-td-links {
148
- background-color: $color-ci-eggshell;
149
- }
150
-
151
- tr:nth-child(even) .cl-td-links {
152
- background-color: var(--cl-color-highlight);
139
+ tbody tr td {
140
+ background-color: var(--cl-color-background);
153
141
  }
154
142
  }
package/src/components/text/ClLinkExternal/style.scss CHANGED
@@ -60,7 +60,9 @@ a.cl-a-none:not(.btn) {
60
60
  .cl-a-quickaction {
61
61
  @extend %cl-a-btn;
62
62
  @extend %cl-a-transparent;
63
+ @include cl-color-focus-outline(var(--cl-color-focus), 2px);
63
64
 
65
+ border-radius: 0;
64
66
  margin-left: $spacing-tiny;
65
67
  text-decoration: none;
66
68
 
package/src/styles/components/form.variables.scss CHANGED
@@ -33,18 +33,18 @@ $form-spacing-label-input: px(2);
33
33
  @include typography-font($typography-monospace-font-list, 400, px(17), 1.59em, 0.025em, 80%);
34
34
  }
35
35
 
36
- @mixin form-focus-embed {
37
- background-color: var(--cl-color-highlight);
38
- border-color: $color-focus;
36
+ @mixin cl-form-focus-embed {
37
+ @include cl-button-focus-outline; // additional inner outline
38
+
39
+ border-color: $color-focus !important;
39
40
  box-shadow: none;
40
41
  color: $color-focus;
41
- outline: 0;
42
42
  }
43
43
 
44
- @mixin form-focus {
44
+ @mixin cl-form-focus {
45
45
  &:focus,
46
46
  &:focus:first-child,
47
47
  &:focus:last-child {
48
- @include form-focus-embed;
48
+ @include cl-form-focus-embed;
49
49
  }
50
50
  }
package/src/styles/layout/typography.variables.scss CHANGED
@@ -92,7 +92,7 @@ $typography-monospace-line-height: 1.375;
92
92
 
93
93
  @mixin typography-link-invisible {
94
94
  @include typography-link(inherit, inherit, 0);
95
- @include cl-color-focus-outline(var(--cl-color-focus), 1px);
95
+ @include cl-color-focus-outline(var(--cl-color-focus), 2px);
96
96
  }
97
97
 
98
98
  @mixin cl-btn-a($line-height-px) {
@@ -129,7 +129,7 @@ $typography-monospace-line-height: 1.375;
129
129
 
130
130
  %cl-a {
131
131
  @include typography-link(var(--cl-color-link), $color-ci-red);
132
- @include cl-color-focus-outline(var(--cl-color-focus), 1px);
132
+ @include cl-color-focus-outline(var(--cl-color-focus), 2px);
133
133
  }
134
134
 
135
135
  %cl-a-text {
package/src/styles/vendors/castlabs.scss CHANGED
@@ -8,10 +8,10 @@
8
8
  }
9
9
 
10
10
  .cl-nav-top {
11
- border-bottom: 2px solid $color-ci-red;
11
+ border-bottom: $brand-line-width solid $color-ci-red;
12
12
 
13
13
  .col-12 {
14
- height: calc(3rem - 2px) !important; // sass-lint:disable-line no-important
14
+ height: calc(3rem - $brand-line-width) !important; // sass-lint:disable-line no-important
15
15
  }
16
16
  }
17
17
  }