@siemens/element-theme 49.5.0 → 49.6.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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/styles/bootstrap/_tooltip.scss +0 -1
  3. package/src/styles/bootstrap/forms/_form-check.scss +13 -14
  4. package/src/styles/components/_switch.scss +3 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@siemens/element-theme",
3
- "version": "49.5.0",
3
+ "version": "49.6.0",
4
4
  "description": "Element CSS theme.",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/styles/bootstrap/_tooltip.scss CHANGED
@@ -35,7 +35,6 @@
35
35
  }
36
36
 
37
37
  .tooltip-inner {
38
- min-inline-size: 100px;
39
38
  max-inline-size: variables.$tooltip-max-width;
40
39
  padding-block: variables.$tooltip-padding-y;
41
40
  padding-inline: variables.$tooltip-padding-x;
package/src/styles/bootstrap/forms/_form-check.scss CHANGED
@@ -8,23 +8,23 @@
8
8
  // there's too many differences between what BS5 does and what the design system expects
9
9
  @use 'sass:map';
10
10
 
11
- $form-check-size: map.get(spacers.$spacers, 6);
12
- $form-radio-size: map.get(spacers.$spacers, 6);
13
- $form-radio-inner-size: map.get(spacers.$spacers, 3);
14
- $form-radio-offset: ($form-radio-size - $form-radio-inner-size) * 0.5 - 1px;
11
+ $form-check-size: 1rem;
12
+ $form-radio-size: 1rem;
13
+ $form-radio-inner-size: 0.375rem;
14
+ $form-radio-offset: calc((#{$form-radio-size} - #{$form-radio-inner-size}) * 0.5 - 1px);
15
15
  $form-check-padding-x: map.get(spacers.$spacers, 2);
16
16
 
17
- $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
17
+ $form-check-label-start: calc($form-check-size + map.get(spacers.$spacers, 4));
18
18
 
19
19
  %form-check-spacing {
20
20
  .form-check-input {
21
- margin-inline-start: -1 * $form-check-label-start;
21
+ margin-inline-start: calc(-1 * $form-check-label-start);
22
22
  }
23
23
  }
24
24
 
25
25
  .form-check {
26
26
  padding-block: map.get(spacers.$spacers, 1);
27
- padding-inline-start: map.get(spacers.$spacers, 8);
27
+ padding-inline-start: calc($form-check-size + map.get(spacers.$spacers, 4));
28
28
 
29
29
  @extend %form-check-spacing;
30
30
 
@@ -67,7 +67,6 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
67
67
  inline-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
68
68
  block-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
69
69
  border-radius: semantic-tokens.$element-button-radius;
70
- inset-inline-start: map.get(spacers.$spacers, 1);
71
70
 
72
71
  &::after {
73
72
  content: '';
@@ -112,11 +111,11 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
112
111
  &::after {
113
112
  mask-image: none;
114
113
  background-color: semantic-tokens.$element-action-primary;
115
- inline-size: 10px;
116
- block-size: 2px;
114
+ inline-size: 0.625rem;
115
+ block-size: 0.125rem;
117
116
  opacity: 1;
118
- inset-inline-start: 2px;
119
- inset-block-start: 6px;
117
+ inset-inline-start: 0.125rem;
118
+ inset-block-start: 0.375rem;
120
119
  }
121
120
 
122
121
  &:hover {
@@ -246,7 +245,7 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
246
245
  .datatable-checkbox {
247
246
  inline-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
248
247
  block-size: $form-check-size !important; // stylelint-disable-line declaration-no-important
249
- inset-block-start: 1px !important; // stylelint-disable-line declaration-no-important
248
+ inset-block-start: 0.0625rem !important; // stylelint-disable-line declaration-no-important
250
249
 
251
250
  input[type='checkbox'] {
252
251
  @extend %form-check-base;
@@ -255,7 +254,7 @@ $form-check-label-start: $form-check-size + map.get(spacers.$spacers, 4);
255
254
  }
256
255
 
257
256
  .datatable-body .datatable-checkbox {
258
- inset-block-start: 3px !important; // stylelint-disable-line declaration-no-important
257
+ inset-block-start: 0.1875rem !important; // stylelint-disable-line declaration-no-important
259
258
  }
260
259
  }
261
260
 
package/src/styles/components/_switch.scss CHANGED
@@ -2,13 +2,13 @@
2
2
 
3
3
  @use 'sass:map';
4
4
 
5
- $si-switch-size: 20px !default;
5
+ $si-switch-size: 1.25rem !default;
6
6
  $si-switch-inline-size: calc(2 * #{$si-switch-size});
7
7
  $si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers, 4));
8
8
  $si-switch-background-off-color: variables.$element-ui-4 !default;
9
9
  $si-switch-background-on-color: variables.$element-ui-0 !default;
10
10
  $si-switch-background-disabled-color: variables.$element-ui-3 !default;
11
- $si-switch-slider-margin: 4px !default;
11
+ $si-switch-slider-margin: 0.25rem !default;
12
12
  $si-switch-slider-off-color: variables.$element-ui-2 !default;
13
13
  $si-switch-slider-on-color: variables.$element-ui-5 !default;
14
14
  $si-switch-transition-length: variables.element-transition-duration(0.4s) !default;
@@ -22,7 +22,7 @@ $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin})
22
22
  .form-check-input {
23
23
  cursor: pointer;
24
24
  inset: 0;
25
- margin-block: - map.get(variables.$spacers, 1);
25
+ margin-block: -0.125rem;
26
26
  margin-inline-start: calc(-1 * $si-switch-inline-spacing);
27
27
  inline-size: $si-switch-inline-size !important; // stylelint-disable-line declaration-no-important
28
28
  block-size: #{$si-switch-size} !important; // stylelint-disable-line declaration-no-important