@policystudio/policy-studio-ui-vue 1.2.0-access.47 → 1.2.0-access.48

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.
@@ -3183,7 +3183,7 @@ video {
3183
3183
  }
3184
3184
  .psui-el-card-infos-icon {
3185
3185
  --tw-text-opacity: 1;
3186
- color: rgb(45, 165, 204, var(--tw-text-opacity, 1));
3186
+ color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
3187
3187
  }
3188
3188
  .psui-el-card-infos-icon {
3189
3189
  font-size: 17px;
@@ -3464,23 +3464,14 @@ video {
3464
3464
  color: rgb(81, 94, 106, var(--tw-text-opacity, 1));
3465
3465
  }
3466
3466
  .psui-el-checkbox:focus {
3467
- outline: 2px solid transparent;
3468
- outline-offset: 2px;
3469
- }
3470
- .psui-el-checkbox:focus-visible {
3471
- border-radius: 6px;
3472
- }
3473
- .psui-el-checkbox:focus-visible {
3474
- outline-style: solid;
3475
- }
3476
- .psui-el-checkbox:focus-visible {
3477
- outline-width: 2px;
3478
- }
3479
- .psui-el-checkbox:focus-visible {
3480
- outline-offset: 2px;
3467
+ outline: none !important;
3481
3468
  }
3482
- .psui-el-checkbox:focus-visible {
3483
- outline-color: #2563EB;
3469
+ .psui-el-checkbox:focus-within {
3470
+ outline: 2px solid #2563eb !important;
3471
+ opacity: 1 !important;
3472
+ outline-offset: 2px !important;
3473
+ border-radius: 6px !important;
3474
+ visibility: visible !important;
3484
3475
  }
3485
3476
  .psui-el-checkbox.disabled .psui-el-checkmark {
3486
3477
  cursor: default !important;
@@ -6811,6 +6802,17 @@ video {
6811
6802
  padding-left: 0.5rem;
6812
6803
  }
6813
6804
 
6805
+ .psui-general-icon:focus {
6806
+ outline: none !important;
6807
+ }
6808
+ .psui-general-icon:focus-within, .psui-general-icon:focus-visible {
6809
+ outline: 2px solid #2563eb !important;
6810
+ opacity: 1 !important;
6811
+ outline-offset: 2px !important;
6812
+ border-radius: 6px !important;
6813
+ visibility: visible !important;
6814
+ }
6815
+
6814
6816
  .psui-pointer-events-none {
6815
6817
  pointer-events: none;
6816
6818
  }
@@ -7176,11 +7178,6 @@ video {
7176
7178
  color: rgb(18, 121, 153, var(--tw-text-opacity, 1));
7177
7179
  }
7178
7180
 
7179
- .psui-text-gray-30 {
7180
- --tw-text-opacity: 1;
7181
- color: rgb(214, 221, 229, var(--tw-text-opacity, 1));
7182
- }
7183
-
7184
7181
  .psui-text-gray-40 {
7185
7182
  --tw-text-opacity: 1;
7186
7183
  color: rgb(162, 172, 183, var(--tw-text-opacity, 1));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@policystudio/policy-studio-ui-vue",
3
- "version": "1.2.0-access.47",
3
+ "version": "1.2.0-access.48",
4
4
  "description": "Policy Studio UI",
5
5
  "author": "Policy Studio Team",
6
6
  "scripts": {
@@ -36,6 +36,7 @@
36
36
  @import './components/PsSimpleAlert.scss';
37
37
  @import './components/PsBreadcrumb.scss';
38
38
  @import './components/PsCollapse.scss';
39
+ @import './components/PsIcon.scss';
39
40
 
40
41
 
41
42
  @import "tailwindcss/base";
@@ -45,6 +46,7 @@
45
46
  *:focus {
46
47
  outline: none;
47
48
  }
49
+
48
50
  html {
49
51
  -webkit-font-smoothing: antialiased;
50
52
  -moz-osx-font-smoothing: grayscale;
@@ -22,7 +22,7 @@
22
22
  }
23
23
 
24
24
  &-icon {
25
- @apply psui-text-blue-50 psui-mr-1;
25
+ @apply psui-text-blue-60 psui-mr-1;
26
26
  font-size: 17px;
27
27
  }
28
28
 
@@ -3,11 +3,15 @@
3
3
  @apply psui-relative psui-text-gray-60;
4
4
 
5
5
  &:focus {
6
- @apply psui-outline-none;
6
+ outline: none !important;
7
7
  }
8
8
 
9
- &:focus-visible {
10
- @apply psui-outline psui-outline-2 psui-outline-focus-ring psui-outline-offset-2 psui-rounded-[6px];
9
+ &:focus-within {
10
+ outline: 2px solid #2563eb !important;
11
+ opacity: 1 !important;
12
+ outline-offset: 2px !important;
13
+ border-radius: 6px !important;
14
+ visibility: visible !important;
11
15
  }
12
16
 
13
17
  &.disabled {
@@ -0,0 +1,16 @@
1
+ @layer components {
2
+ .psui-general-icon {
3
+
4
+ &:focus {
5
+ outline: none !important;
6
+ }
7
+
8
+ &:focus-within, &:focus-visible {
9
+ outline: 2px solid #2563eb !important;
10
+ opacity: 1 !important;
11
+ outline-offset: 2px !important;
12
+ border-radius: 6px !important;
13
+ visibility: visible !important;
14
+ }
15
+ }
16
+ }
@@ -16,7 +16,7 @@
16
16
  class="psui-el-chart-legend-total"
17
17
  >{{ total }}</span>
18
18
  <span
19
- class="psui-text-gray-30"
19
+ class="psui-text-gray-60"
20
20
  v-if="total && percentage"
21
21
  > | </span>
22
22
  <span
@@ -4,7 +4,7 @@
4
4
  class="psui-el-checkbox"
5
5
  :class="[getComponentClass, { disabled: disabled }]"
6
6
  v-bind="getComponentAttrs"
7
- @click.prevent="emit('click', $event)"
7
+ @click.prevent.stop="emit('click', $event)"
8
8
  >
9
9
  <input
10
10
  type="checkbox"
@@ -14,6 +14,7 @@
14
14
  :id="getInputId"
15
15
  v-bind="inputAttrs"
16
16
  @change="emit('change', $event)"
17
+ @keyup.enter="emit('change', $event)"
17
18
  >
18
19
  <label
19
20
  :for="getInputId"
@@ -38,6 +39,7 @@
38
39
  :id="getInputId"
39
40
  v-bind="inputAttrs"
40
41
  @change="emit('change', $event)"
42
+ @keyup.enter="emit('change', $event)"
41
43
  >
42
44
  <label
43
45
  :for="getInputId"
@@ -1,6 +1,8 @@
1
1
  <template>
2
2
  <div
3
+ class="psui-general-icon"
3
4
  :style="{ display: display }"
5
+ tabindex="0"
4
6
  @click="emit('click', $event)"
5
7
  >
6
8
  <span