@castlabs/ui 7.21.1 → 7.22.0
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/dist/castlabs-ui-editor.common.js +21 -21
- package/dist/castlabs-ui-editor.common.js.map +1 -1
- package/dist/castlabs-ui-editor.umd.js +22 -22
- package/dist/castlabs-ui-editor.umd.js.map +1 -1
- package/dist/castlabs-ui.common.js +2 -2
- package/dist/castlabs-ui.common.js.map +1 -1
- package/dist/castlabs-ui.core.js +1 -1
- package/dist/castlabs-ui.css +1 -1
- package/dist/castlabs-ui.module.js +1 -1
- package/dist/castlabs-ui.umd.js +3 -3
- package/dist/castlabs-ui.umd.js.map +1 -1
- package/package.json +15 -15
- package/src/components/ClButton/style.scss +4 -1
- package/src/components/form/ClFieldGroup/style.scss +66 -73
- package/src/components/widget/ClPage/style.scss +27 -0
- package/src/styles/abstracts/button.scss +1 -26
- package/src/styles/abstracts/color.scss +2 -2
- package/src/styles/abstracts/typography.scss +6 -7
- package/src/styles/layout/meta.scss +1 -1
- package/src/styles/themes/dark.scss +4 -2
- package/src/styles/vendors/bootstrap.scss +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@castlabs/ui",
|
|
3
|
-
"version": "7.
|
|
3
|
+
"version": "7.22.0",
|
|
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.",
|
|
@@ -42,42 +42,42 @@
|
|
|
42
42
|
"simplebar": "6.3.3"
|
|
43
43
|
},
|
|
44
44
|
"optionalDependencies": {
|
|
45
|
-
"@rollup/rollup-linux-x64-gnu": "4.
|
|
45
|
+
"@rollup/rollup-linux-x64-gnu": "4.61.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@castlabs/ui-editor": "file:../castlabs-ui-editor",
|
|
49
49
|
"@tsconfig/node22": "22.0.5",
|
|
50
|
-
"@types/jsdom": "28.0.
|
|
51
|
-
"@types/node": "25.
|
|
52
|
-
"@vitejs/plugin-vue": "6.0.
|
|
53
|
-
"@vitest/eslint-plugin": "1.6.
|
|
50
|
+
"@types/jsdom": "28.0.3",
|
|
51
|
+
"@types/node": "25.9.1",
|
|
52
|
+
"@vitejs/plugin-vue": "6.0.7",
|
|
53
|
+
"@vitest/eslint-plugin": "1.6.19",
|
|
54
54
|
"@vue/eslint-config-prettier": "10.2.0",
|
|
55
55
|
"@vue/eslint-config-typescript": "14.7.0",
|
|
56
|
-
"@vue/test-utils": "2.4.
|
|
56
|
+
"@vue/test-utils": "2.4.10",
|
|
57
57
|
"@vue/tsconfig": "0.9.1",
|
|
58
58
|
"core-js": "3.49.0",
|
|
59
59
|
"dree": "5.1.5",
|
|
60
60
|
"eslint-plugin-import": "2.32.0",
|
|
61
|
-
"eslint-plugin-n": "
|
|
61
|
+
"eslint-plugin-n": "18.0.1",
|
|
62
62
|
"eslint-plugin-promise": "7.3.0",
|
|
63
|
-
"eslint-plugin-vue": "10.9.
|
|
63
|
+
"eslint-plugin-vue": "10.9.1",
|
|
64
64
|
"eslint": "9.39.4",
|
|
65
65
|
"gulp-concat": "2.6.1",
|
|
66
66
|
"gulp-replace": "1.1.4",
|
|
67
67
|
"gulp": "5.0.1",
|
|
68
68
|
"jsdom": "29.1.1",
|
|
69
69
|
"npm-run-all": "4.1.5",
|
|
70
|
-
"sass": "1.
|
|
70
|
+
"sass": "1.100.0",
|
|
71
71
|
"stylelint-config-sass-guidelines": "13.0.0",
|
|
72
72
|
"stylelint-config-standard-vue": "1.0.0",
|
|
73
73
|
"stylelint-config-standard": "40.0.0",
|
|
74
74
|
"stylelint-order": "8.1.1",
|
|
75
|
-
"stylelint-scss": "7.
|
|
75
|
+
"stylelint-scss": "7.1.1",
|
|
76
76
|
"typescript": "6.0.3",
|
|
77
|
-
"vite": "8.0.
|
|
78
|
-
"vitest": "4.1.
|
|
79
|
-
"vue-tsc": "3.
|
|
80
|
-
"vue": "3.5.
|
|
77
|
+
"vite": "8.0.16",
|
|
78
|
+
"vitest": "4.1.8",
|
|
79
|
+
"vue-tsc": "3.3.3",
|
|
80
|
+
"vue": "3.5.35"
|
|
81
81
|
},
|
|
82
82
|
"overrides": {
|
|
83
83
|
"glob": "^13"
|
|
@@ -52,18 +52,21 @@
|
|
|
52
52
|
background-color: $color-ci-sea;
|
|
53
53
|
border-color: $color-ci-sea;
|
|
54
54
|
color: $color-ci-eggshell;
|
|
55
|
+
outline-color: var(--cl-color-eggshell) !important;
|
|
55
56
|
}
|
|
56
57
|
|
|
57
58
|
&.cl-color-secondary {
|
|
58
59
|
background-color: var(--cl-color-text);
|
|
59
60
|
border-color: var(--cl-color-text);
|
|
60
61
|
color: var(--cl-color-text-inverted);
|
|
62
|
+
outline-color: var(--cl-color-text-inverted) !important;
|
|
61
63
|
}
|
|
62
64
|
|
|
63
65
|
&.cl-color-tertiary {
|
|
64
66
|
background-color: transparent;
|
|
65
67
|
border-color: var(--cl-color-text);
|
|
66
68
|
color: var(--cl-color-text);
|
|
69
|
+
outline-color: var(--cl-color-text) !important;
|
|
67
70
|
}
|
|
68
71
|
}
|
|
69
72
|
|
|
@@ -82,7 +85,7 @@ a.btn {
|
|
|
82
85
|
font-weight: 500;
|
|
83
86
|
line-height: 1;
|
|
84
87
|
margin-left: $spacing-tiny;
|
|
85
|
-
min-width:
|
|
88
|
+
min-width: $spacing-small;
|
|
86
89
|
padding: 0;
|
|
87
90
|
|
|
88
91
|
&:not(:hover, [class*='cl-color-']) {
|
|
@@ -5,17 +5,32 @@
|
|
|
5
5
|
align-items: center;
|
|
6
6
|
display: flex;
|
|
7
7
|
|
|
8
|
-
>
|
|
8
|
+
> :not(.form-control, .input-group-text, :last-child) {
|
|
9
9
|
margin-right: $spacing-tiny;
|
|
10
10
|
}
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
select + .btn,
|
|
14
|
-
.invalid-feedback + .btn,
|
|
15
|
-
.valid-feedback + .btn {
|
|
12
|
+
> :not(.form-control, .input-group-text, :first-child) {
|
|
16
13
|
margin-left: $spacing-tiny;
|
|
17
14
|
}
|
|
18
15
|
|
|
16
|
+
> [type='range'] {
|
|
17
|
+
border-radius: $brand-border-radius !important;
|
|
18
|
+
margin-bottom: $spacing-tiny;
|
|
19
|
+
margin-top: $spacing-tiny;
|
|
20
|
+
|
|
21
|
+
+ [type='range'] {
|
|
22
|
+
margin-left: $spacing-tiny;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
&:has(+ [type='range']) {
|
|
26
|
+
margin-right: $spacing-tiny;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
> :not(.cl-btn-quickaction) + .cl-btn-quickaction {
|
|
31
|
+
margin-left: $spacing-small;
|
|
32
|
+
}
|
|
33
|
+
|
|
19
34
|
> .btn {
|
|
20
35
|
flex-shrink: 0;
|
|
21
36
|
}
|
|
@@ -31,19 +46,6 @@
|
|
|
31
46
|
&:focus {
|
|
32
47
|
z-index: 1; // needed so the focused element's border is always on top
|
|
33
48
|
}
|
|
34
|
-
|
|
35
|
-
@include media-breakpoint-up(sm) {
|
|
36
|
-
&:not(.btn) + * {
|
|
37
|
-
// trick to share one ][ border between 2 inputs
|
|
38
|
-
&:not(.btn) {
|
|
39
|
-
border-left-width: 0;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
&:not(:focus, :focus-visible).invalid {
|
|
43
|
-
box-shadow: -$brand-line-width 0 0 $color-error !important; // sass-lint:disable-line no-important
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
49
|
}
|
|
48
50
|
|
|
49
51
|
.invalid-feedback,
|
|
@@ -86,70 +88,61 @@
|
|
|
86
88
|
}
|
|
87
89
|
}
|
|
88
90
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
+
&:not(.cl-no-wrap) {
|
|
92
|
+
@include media-breakpoint-up(sm) {
|
|
93
|
+
> .form-control,
|
|
94
|
+
> .input-group-text {
|
|
95
|
+
&:has(+ .form-control),
|
|
96
|
+
&:has(+ p + .form-control),
|
|
97
|
+
&:has(+ p + p + .form-control),
|
|
98
|
+
&:has(+ .input-group-text) {
|
|
99
|
+
border-bottom-right-radius: 0;
|
|
100
|
+
border-right-color: $color-ci-clay;
|
|
101
|
+
border-top-right-radius: 0;
|
|
102
|
+
}
|
|
91
103
|
|
|
92
|
-
|
|
93
|
-
|
|
104
|
+
+ .input-group-text,
|
|
105
|
+
+ p + .form-control,
|
|
106
|
+
+ p + p + .form-control,
|
|
107
|
+
+ .form-control {
|
|
108
|
+
border-bottom-left-radius: 0;
|
|
109
|
+
border-left-width: 0; // trick to share one ][ border between 2 inputs
|
|
110
|
+
border-top-left-radius: 0;
|
|
111
|
+
}
|
|
94
112
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
113
|
+
&:has(+ .form-control.invalid),
|
|
114
|
+
&:has(+ .form-control[invalid]),
|
|
115
|
+
&:has(+ p + .form-control.invalid),
|
|
116
|
+
&:has(+ p + .form-control[invalid]),
|
|
117
|
+
&:has(+ p + p + .form-control.invalid),
|
|
118
|
+
&:has(+ p + p + .form-control[invalid]) {
|
|
119
|
+
border-right-color: $color-error;
|
|
120
|
+
}
|
|
98
121
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
122
|
+
&:has(+ .form-control:focus),
|
|
123
|
+
&:has(+ .form-control:focus-visible),
|
|
124
|
+
&:has(+ p + .form-control:focus),
|
|
125
|
+
&:has(+ p + .form-control:focus-visible),
|
|
126
|
+
&:has(+ p + p + .form-control:focus),
|
|
127
|
+
&:has(+ p + p + .form-control:focus-visible) {
|
|
128
|
+
border-right-color: $color-focus !important;
|
|
129
|
+
}
|
|
102
130
|
}
|
|
103
131
|
}
|
|
104
|
-
}
|
|
105
132
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
> .form-control {
|
|
109
|
-
border-radius: 0;
|
|
133
|
+
@include media-breakpoint-down(sm) {
|
|
134
|
+
flex-direction: column;
|
|
110
135
|
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
border-top-left-radius: $brand-border-radius;
|
|
114
|
-
}
|
|
115
|
-
|
|
116
|
-
&:last-of-type {
|
|
117
|
-
border-bottom-right-radius: $brand-border-radius;
|
|
118
|
-
border-top-right-radius: $brand-border-radius;
|
|
119
|
-
}
|
|
120
|
-
}
|
|
136
|
+
> * {
|
|
137
|
+
width: 100% !important;
|
|
121
138
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
.form-control + p + p + .form-control {
|
|
126
|
-
border-bottom-left-radius: 0;
|
|
127
|
-
border-top-left-radius: 0;
|
|
128
|
-
}
|
|
139
|
+
&:not(:first-child) {
|
|
140
|
+
margin-top: $spacing-tiny;
|
|
141
|
+
}
|
|
129
142
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
.form-control:has(+ p + p + .form-control) {
|
|
134
|
-
border-bottom-right-radius: 0;
|
|
135
|
-
border-top-right-radius: 0;
|
|
136
|
-
|
|
137
|
-
&:not(.btn) {
|
|
138
|
-
border-right-color: $color-ci-clay;
|
|
139
|
-
|
|
140
|
-
&:has(+ :focus),
|
|
141
|
-
&:has(+ :focus-visible),
|
|
142
|
-
&:has(+ p + :focus),
|
|
143
|
-
&:has(+ p + :focus-visible),
|
|
144
|
-
&:has(+ p + p + :focus),
|
|
145
|
-
&:has(+ p + p + :focus-visible),
|
|
146
|
-
&:has(+ .invalid:focus),
|
|
147
|
-
&:has(+ [invalid]:focus-visible),
|
|
148
|
-
&:has(+ p + .invalid:focus),
|
|
149
|
-
&:has(+ p + [invalid]:focus-visible),
|
|
150
|
-
&:has(+ p + p + .invalid:focus),
|
|
151
|
-
&:has(+ p + p + [invalid]:focus-visible) {
|
|
152
|
-
border-right-color: $color-focus !important;
|
|
143
|
+
&.btn {
|
|
144
|
+
font-size: 0.75em;
|
|
145
|
+
margin-left: 0 !important;
|
|
153
146
|
}
|
|
154
147
|
}
|
|
155
148
|
}
|
|
@@ -39,6 +39,7 @@
|
|
|
39
39
|
|
|
40
40
|
.cl-section-fullscreen {
|
|
41
41
|
height: 100%;
|
|
42
|
+
padding-bottom: 0;
|
|
42
43
|
|
|
43
44
|
.cl-table-scroll,
|
|
44
45
|
> .container,
|
|
@@ -52,6 +53,10 @@
|
|
|
52
53
|
padding-top: 0 !important;
|
|
53
54
|
}
|
|
54
55
|
|
|
56
|
+
.cl-table-scroll {
|
|
57
|
+
margin-bottom: $spacing-small !important;
|
|
58
|
+
}
|
|
59
|
+
|
|
55
60
|
table {
|
|
56
61
|
display: block;
|
|
57
62
|
max-height: 100%;
|
|
@@ -66,3 +71,25 @@
|
|
|
66
71
|
z-index: 1;
|
|
67
72
|
}
|
|
68
73
|
}
|
|
74
|
+
|
|
75
|
+
.cl-fullscreen-scroller {
|
|
76
|
+
max-height: 100%;
|
|
77
|
+
overflow: scroll;
|
|
78
|
+
|
|
79
|
+
.cl-table-scroll {
|
|
80
|
+
overflow: unset;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
table {
|
|
84
|
+
display: table !important;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.cl-table-data .cl-td-links {
|
|
88
|
+
padding-left: $spacing-small;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.cl-resizer {
|
|
92
|
+
background-color: var(--cl-color-background) !important;
|
|
93
|
+
margin-left: calc(-0.5rem - 2px) !important;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
@@ -55,33 +55,8 @@
|
|
|
55
55
|
color: var(--cl-color-text);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
|
-
// our focus (tab'ed) buttons look the same but are outlined
|
|
59
|
-
.btn-check:focus-visible + &,
|
|
60
|
-
&:focus-visible {
|
|
61
|
-
background-color: var(--cl-color-background);
|
|
62
|
-
border-color: var(--cl-color-border);
|
|
63
|
-
color: var(--cl-color-text);
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
// our active (mouse-down) buttons invert background & text color
|
|
67
|
-
&:active,
|
|
68
|
-
&.active,
|
|
69
|
-
.show > &.dropdown-toggle {
|
|
70
|
-
// .dropdown-toggle is for topnav
|
|
71
|
-
background-color: var(--cl-color-background) !important;
|
|
72
|
-
border-color: var(--cl-color-border) !important;
|
|
73
|
-
color: var(--cl-color-text) !important;
|
|
74
|
-
outline: 0 !important;
|
|
75
|
-
|
|
76
|
-
&.cl-color-transparent {
|
|
77
|
-
background-color: $color-ci-eggshell;
|
|
78
|
-
border-color: $color-ci-eggshell;
|
|
79
|
-
color: $color-ci-night;
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
|
|
83
58
|
&:hover:active {
|
|
84
|
-
opacity: var(--cl-opacity-active)
|
|
59
|
+
opacity: var(--cl-opacity-active);
|
|
85
60
|
}
|
|
86
61
|
|
|
87
62
|
@if $defaultColors == true {
|
|
@@ -58,14 +58,14 @@ $color-code-background: rgb(16 0 0 / 5%); // transparent to work on different co
|
|
|
58
58
|
$color-line: $color-ci-clay;
|
|
59
59
|
$color-opacity-active: 0.8;
|
|
60
60
|
|
|
61
|
-
@mixin cl-color-focus-outline-raw($color: var(--cl-color-
|
|
61
|
+
@mixin cl-color-focus-outline-raw($color: var(--cl-color-text), $offset: -3px) {
|
|
62
62
|
box-shadow: none; // disable BS outlines
|
|
63
63
|
outline: 1px dashed $color;
|
|
64
64
|
outline-offset: $offset;
|
|
65
65
|
z-index: 100;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
@mixin cl-color-focus-outline($color: var(--cl-color-
|
|
68
|
+
@mixin cl-color-focus-outline($color: var(--cl-color-text), $offset: -3px) {
|
|
69
69
|
&:focus-visible {
|
|
70
70
|
@include cl-color-focus-outline-raw($color, $offset);
|
|
71
71
|
}
|
|
@@ -118,9 +118,10 @@ $typography-monospace-line-height: 1.375;
|
|
|
118
118
|
@mixin cl-btn-a($line-height-px) {
|
|
119
119
|
// button styled as regular link
|
|
120
120
|
@extend %cl-a;
|
|
121
|
+
@include cl-color-focus-outline(var(--cl-color-text), 2px);
|
|
121
122
|
|
|
122
123
|
#{'--cl-color-text'}: inherit !important;
|
|
123
|
-
background-color: transparent;
|
|
124
|
+
background-color: transparent !important;
|
|
124
125
|
background-position: left bottom 0.25em; // depends on underline
|
|
125
126
|
background-repeat: no-repeat;
|
|
126
127
|
background-size: 100% 1px;
|
|
@@ -133,29 +134,27 @@ $typography-monospace-line-height: 1.375;
|
|
|
133
134
|
margin: 0;
|
|
134
135
|
min-width: inherit;
|
|
135
136
|
outline: inherit;
|
|
136
|
-
outline-offset:
|
|
137
|
+
outline-offset: 2px !important;
|
|
137
138
|
padding: 0;
|
|
138
139
|
text-align: inherit;
|
|
139
140
|
vertical-align: inherit;
|
|
140
141
|
|
|
141
142
|
&:focus-visible {
|
|
142
|
-
color: var(--cl-color-
|
|
143
|
+
color: var(--cl-color-text);
|
|
143
144
|
}
|
|
144
145
|
|
|
145
146
|
&:hover {
|
|
146
|
-
background-color: transparent;
|
|
147
147
|
color: var(--cl-color-hover);
|
|
148
148
|
opacity: inherit;
|
|
149
149
|
}
|
|
150
150
|
|
|
151
151
|
&:active {
|
|
152
|
-
background-color: transparent;
|
|
153
|
-
color: var(--cl-color-hover);
|
|
152
|
+
background-color: transparent !important;
|
|
153
|
+
color: var(--cl-color-hover) !important;
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
&.disabled,
|
|
157
157
|
&:disabled {
|
|
158
|
-
background-color: transparent;
|
|
159
158
|
color: var(--cl-color-text);
|
|
160
159
|
cursor: text;
|
|
161
160
|
text-decoration: none;
|
|
@@ -9,12 +9,14 @@ $cl-url-postfix: '' !default;
|
|
|
9
9
|
.cl-color-haze,
|
|
10
10
|
.cl-section-alternate,
|
|
11
11
|
.card.cl-color-haze {
|
|
12
|
-
#{'--cl-color-icon'}: $color-ci-steel;
|
|
13
12
|
#{'--cl-color-code'}: $color-ci-sky;
|
|
13
|
+
#{'--cl-color-focus'}: $color-ci-steel;
|
|
14
|
+
#{'--cl-color-icon'}: $color-ci-steel;
|
|
14
15
|
#{'--cl-color-input-background'}: $color-ci-night;
|
|
15
16
|
#{'--cl-color-input-border'}: $color-ci-clay;
|
|
16
|
-
#{'--cl-color-
|
|
17
|
+
#{'--cl-color-line'}: $color-ci-steel;
|
|
17
18
|
#{'--cl-color-link'}: $color-ci-eggshell;
|
|
19
|
+
#{'--cl-color-text'}: $color-ci-eggshell;
|
|
18
20
|
#{'--cl-color-text-inverted'}: $color-ci-night;
|
|
19
21
|
|
|
20
22
|
textarea[disabled],
|