@swisspost/design-system-styles 6.4.4 → 6.5.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 (108) hide show
  1. package/_svg-icon-map.scss +875 -845
  2. package/basics.css +1 -1
  3. package/components/accordion.scss +51 -41
  4. package/components/button-group.scss +5 -0
  5. package/components/datepicker.scss +3 -1
  6. package/components/elevation.scss +2 -1
  7. package/components/floating-label.scss +30 -2
  8. package/components/form-check.scss +9 -3
  9. package/components/form-select.scss +46 -2
  10. package/components/intranet-header/_sidebar.scss +1 -1
  11. package/components/intranet-header/_top-navigation.scss +0 -1
  12. package/components/pagination.scss +15 -0
  13. package/components/sizing.scss +15 -0
  14. package/components/tabs/_tabs-wrapper.scss +1 -2
  15. package/functions/_contrast.scss +9 -0
  16. package/index.css +3 -3
  17. package/intranet.css +3 -3
  18. package/mixins/_elevation.scss +6 -0
  19. package/mixins/_focus.scss +9 -0
  20. package/mixins/_index.scss +1 -0
  21. package/package.json +25 -32
  22. package/placeholders/_close.scss +6 -0
  23. package/variables/_color.scss +24 -2
  24. package/variables/_commons.scss +3 -0
  25. package/variables/_grid.scss +17 -22
  26. package/variables/components/_accordion.scss +15 -8
  27. package/variables/components/_form-select.scss +11 -1
  28. package/variables/components/_forms.scss +30 -7
  29. package/variables/components/_stepper.scss +1 -4
  30. package/schematics/migrations/_example-dom-migration/index.d.ts +0 -2
  31. package/schematics/migrations/_example-dom-migration/index.js +0 -131
  32. package/schematics/migrations/_example-dom-migration/index.js.map +0 -1
  33. package/schematics/migrations/bootstrap/badge/index.d.ts +0 -2
  34. package/schematics/migrations/bootstrap/badge/index.js +0 -85
  35. package/schematics/migrations/bootstrap/badge/index.js.map +0 -1
  36. package/schematics/migrations/bootstrap/blockquote/index.d.ts +0 -2
  37. package/schematics/migrations/bootstrap/blockquote/index.js +0 -40
  38. package/schematics/migrations/bootstrap/blockquote/index.js.map +0 -1
  39. package/schematics/migrations/bootstrap/button/index.d.ts +0 -2
  40. package/schematics/migrations/bootstrap/button/index.js +0 -56
  41. package/schematics/migrations/bootstrap/button/index.js.map +0 -1
  42. package/schematics/migrations/bootstrap/button-close/index.d.ts +0 -2
  43. package/schematics/migrations/bootstrap/button-close/index.js +0 -35
  44. package/schematics/migrations/bootstrap/button-close/index.js.map +0 -1
  45. package/schematics/migrations/bootstrap/form-checkbox/index.d.ts +0 -2
  46. package/schematics/migrations/bootstrap/form-checkbox/index.js +0 -48
  47. package/schematics/migrations/bootstrap/form-checkbox/index.js.map +0 -1
  48. package/schematics/migrations/bootstrap/form-control/index.d.ts +0 -2
  49. package/schematics/migrations/bootstrap/form-control/index.js +0 -28
  50. package/schematics/migrations/bootstrap/form-control/index.js.map +0 -1
  51. package/schematics/migrations/bootstrap/form-radio/index.d.ts +0 -2
  52. package/schematics/migrations/bootstrap/form-radio/index.js +0 -48
  53. package/schematics/migrations/bootstrap/form-radio/index.js.map +0 -1
  54. package/schematics/migrations/bootstrap/form-select/index.d.ts +0 -2
  55. package/schematics/migrations/bootstrap/form-select/index.js +0 -54
  56. package/schematics/migrations/bootstrap/form-select/index.js.map +0 -1
  57. package/schematics/migrations/bootstrap/form-switch/index.d.ts +0 -2
  58. package/schematics/migrations/bootstrap/form-switch/index.js +0 -45
  59. package/schematics/migrations/bootstrap/form-switch/index.js.map +0 -1
  60. package/schematics/migrations/bootstrap/forms/index.d.ts +0 -2
  61. package/schematics/migrations/bootstrap/forms/index.js +0 -49
  62. package/schematics/migrations/bootstrap/forms/index.js.map +0 -1
  63. package/schematics/migrations/bootstrap/textarea/index.d.ts +0 -2
  64. package/schematics/migrations/bootstrap/textarea/index.js +0 -38
  65. package/schematics/migrations/bootstrap/textarea/index.js.map +0 -1
  66. package/schematics/migrations/general/classes/bg-opacity.d.ts +0 -2
  67. package/schematics/migrations/general/classes/bg-opacity.js +0 -34
  68. package/schematics/migrations/general/classes/bg-opacity.js.map +0 -1
  69. package/schematics/migrations/general/classes/rtl.d.ts +0 -2
  70. package/schematics/migrations/general/classes/rtl.js +0 -88
  71. package/schematics/migrations/general/classes/rtl.js.map +0 -1
  72. package/schematics/migrations/general/classes/secondary.d.ts +0 -2
  73. package/schematics/migrations/general/classes/secondary.js +0 -16
  74. package/schematics/migrations/general/classes/secondary.js.map +0 -1
  75. package/schematics/migrations/general/classes/sr-only.d.ts +0 -2
  76. package/schematics/migrations/general/classes/sr-only.js +0 -28
  77. package/schematics/migrations/general/classes/sr-only.js.map +0 -1
  78. package/schematics/migrations/general/classes/text-auto.d.ts +0 -2
  79. package/schematics/migrations/general/classes/text-auto.js +0 -16
  80. package/schematics/migrations/general/classes/text-auto.js.map +0 -1
  81. package/schematics/migrations/ngbootstrap/buttons/index.d.ts +0 -2
  82. package/schematics/migrations/ngbootstrap/buttons/index.js +0 -79
  83. package/schematics/migrations/ngbootstrap/buttons/index.js.map +0 -1
  84. package/schematics/migrations/post/custom-select/index.d.ts +0 -2
  85. package/schematics/migrations/post/custom-select/index.js +0 -63
  86. package/schematics/migrations/post/custom-select/index.js.map +0 -1
  87. package/schematics/migrations/post/stepper/index.d.ts +0 -2
  88. package/schematics/migrations/post/stepper/index.js +0 -61
  89. package/schematics/migrations/post/stepper/index.js.map +0 -1
  90. package/schematics/migrations/post/subnavigation/index.d.ts +0 -2
  91. package/schematics/migrations/post/subnavigation/index.js +0 -16
  92. package/schematics/migrations/post/subnavigation/index.js.map +0 -1
  93. package/schematics/migrations/post/topic-teaser/index.d.ts +0 -2
  94. package/schematics/migrations/post/topic-teaser/index.js +0 -42
  95. package/schematics/migrations/post/topic-teaser/index.js.map +0 -1
  96. package/schematics/migrations.json +0 -105
  97. package/schematics/utils/constants.d.ts +0 -5
  98. package/schematics/utils/constants.js +0 -73
  99. package/schematics/utils/constants.js.map +0 -1
  100. package/schematics/utils/dom-migration/dom-update.d.ts +0 -5
  101. package/schematics/utils/dom-migration/dom-update.js +0 -3
  102. package/schematics/utils/dom-migration/dom-update.js.map +0 -1
  103. package/schematics/utils/dom-migration/get-dom-migration-rule.d.ts +0 -3
  104. package/schematics/utils/dom-migration/get-dom-migration-rule.js +0 -128
  105. package/schematics/utils/dom-migration/get-dom-migration-rule.js.map +0 -1
  106. package/schematics/utils/dom-migration/index.d.ts +0 -2
  107. package/schematics/utils/dom-migration/index.js +0 -22
  108. package/schematics/utils/dom-migration/index.js.map +0 -1
@@ -0,0 +1,6 @@
1
+ @use 'sass:map';
2
+ @use '../variables/elevation';
3
+
4
+ @mixin elevation($level) {
5
+ box-shadow: map.get(elevation.$elevation-map, $level);
6
+ }
@@ -0,0 +1,9 @@
1
+ @use '../variables/commons';
2
+
3
+ @mixin focus-ring {
4
+ outline: none;
5
+
6
+ &:focus-visible {
7
+ outline: commons.$outline-width solid commons.$outline-color;
8
+ }
9
+ }
@@ -2,6 +2,7 @@
2
2
  @forward 'badge';
3
3
  @forward 'button';
4
4
  @forward 'color';
5
+ @forward 'focus';
5
6
  @forward 'form-checks';
6
7
  @forward 'forms';
7
8
  @forward 'icons';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@swisspost/design-system-styles",
3
- "version": "6.4.4",
3
+ "version": "6.5.1",
4
4
  "description": "Design System Styles for the Swiss Post web platform.",
5
5
  "author": "Swiss Post <oss@post.ch>",
6
6
  "license": "Apache-2.0",
@@ -16,25 +16,27 @@
16
16
  "access": "public",
17
17
  "linkDirectory": true
18
18
  },
19
+ "peerDependencies": {
20
+ "@ng-bootstrap/ng-bootstrap": "^15.0.0",
21
+ "bootstrap": "~5.3.0"
22
+ },
23
+ "peerDependenciesMeta": {
24
+ "@ng-bootstrap/ng-bootstrap": {
25
+ "optional": true
26
+ },
27
+ "bootstrap": {
28
+ "optional": true
29
+ }
30
+ },
19
31
  "dependencies": {
20
- "@angular-devkit/core": "=15.0.4",
21
- "@angular-devkit/schematics": "=15.0.4",
22
- "@angular/core": "=15.0.4",
23
32
  "@popperjs/core": "2.11.8",
24
- "bootstrap": "5.3.2",
25
- "cheerio": "1.0.0-rc.12",
26
- "prettier": "3.0.3"
33
+ "bootstrap": "5.3.2"
27
34
  },
28
35
  "devDependencies": {
29
- "@angular/compiler": "=15.0.4",
30
- "@percy/cli": "1.27.4",
31
- "@percy/cypress": "3.1.2",
32
- "@swisspost/design-system-icons": "1.0.14",
33
- "@types/node": "18.18.8",
36
+ "@swisspost/design-system-icons": "1.0.17",
37
+ "@types/node": "18.19.5",
34
38
  "autoprefixer": "10.4.16",
35
39
  "copyfiles": "2.4.1",
36
- "cypress": "13.4.0",
37
- "cypress-storybook": "0.5.1",
38
40
  "glob": "10.3.10",
39
41
  "gulp": "4.0.2",
40
42
  "gulp-newer": "^1.4.0",
@@ -42,40 +44,31 @@
42
44
  "gulp-sass": "5.1.0",
43
45
  "jest": "29.7.0",
44
46
  "npm-run-all": "4.1.5",
45
- "postcss": "8.4.31",
47
+ "postcss": "8.4.33",
46
48
  "postcss-scss": "4.0.9",
49
+ "prettier": "3.1.1",
47
50
  "rimraf": "5.0.5",
48
- "sass": "1.69.5",
51
+ "sass": "1.69.7",
49
52
  "stylelint": "15.11.0",
50
53
  "stylelint-config-prettier": "9.0.5",
51
54
  "stylelint-config-sass-guidelines": "10.0.0",
52
- "stylelint-prettier": "4.0.2",
53
- "stylelint-scss": "5.3.0",
55
+ "stylelint-prettier": "4.1.0",
56
+ "stylelint-scss": "5.3.2",
54
57
  "typescript": "4.9.5"
55
58
  },
56
59
  "sass": {
57
60
  "includePaths": [
58
61
  "node_modules"
59
62
  ],
60
- "outputDir": "./dist",
61
- "tscOutDir": "./out-tsc/lib"
62
- },
63
- "schematics": "./schematics/migrations.json",
64
- "ng-update": {
65
- "migrations": "./schematics/migrations.json"
63
+ "outputDir": "./dist"
66
64
  },
67
65
  "scripts": {
68
- "start": "npm-run-all --parallel styles:start schematics:start",
69
- "styles:start": "gulp watch",
70
- "prebuild": "pnpm clean",
71
- "build": "npm-run-all --parallel styles:build schematics:build",
72
- "styles:build": "gulp build",
66
+ "start": "gulp watch",
67
+ "build": "pnpm clean && gulp build",
73
68
  "unit": "gulp sass:tests",
74
69
  "clean": "rimraf out-tsc dist",
75
70
  "format": "prettier src/**/*.scss --write",
76
71
  "lint": "stylelint src/**/*.scss",
77
- "lint:fix": "stylelint src/**/*.scss --fix",
78
- "schematics:start": "copyfiles schematics/migrations.json dist && tsc -p tsconfig.schematics.json --watch",
79
- "schematics:build": "copyfiles schematics/migrations.json dist && tsc -p tsconfig.schematics.json"
72
+ "lint:fix": "stylelint src/**/*.scss --fix"
80
73
  }
81
74
  }
@@ -14,6 +14,7 @@
14
14
  border-radius: close.$close-border-radius;
15
15
  color: close.$close-color;
16
16
  transition: close.$close-transition;
17
+ cursor: pointer;
17
18
 
18
19
  &::before {
19
20
  @include icons-mx.icon(2043);
@@ -30,4 +31,9 @@
30
31
  &:disabled {
31
32
  color: close.$close-disabled-color;
32
33
  }
34
+
35
+ @include utilities-mx.high-contrast-mode() {
36
+ color: CanvasText;
37
+ forced-color-adjust: none;
38
+ }
33
39
  }
@@ -38,7 +38,7 @@ $olive-bright: #aa9d2e;
38
38
  $aubergine-dark: #523178;
39
39
  $aubergine-bright: #7566a0;
40
40
 
41
- // Contextual colors
41
+ // Contextual colors (deprecated)
42
42
  $success: #2c911c;
43
43
  $success-text: #255e1c;
44
44
  $error: #a51728;
@@ -46,6 +46,14 @@ $error-text: #8f0d1c;
46
46
  $warning: #f49e00;
47
47
  $info: #cce4ee;
48
48
 
49
+ // Signal Colors
50
+ $success-green: #2c871d; /* When value is changed, please changed as well the copied value in ../functions/_contrast.scss, @function light-or-dark()*/
51
+ $error-red: #a51728;
52
+ $warning-orange: #f49e00;
53
+ $success-background: #c0debb;
54
+ $error-background: #ffdade;
55
+ $warning-background: #fce2b2;
56
+
49
57
  /**
50
58
  * Maps. Allow maps to have custom colors from the project
51
59
  * by always merging into a default empty map
@@ -67,13 +75,26 @@ $contextual-colors: () !default;
67
75
  $contextual-colors: map.merge(
68
76
  $contextual-colors,
69
77
  (
70
- 'success': $success,
71
78
  'info': $info,
79
+ 'success': $success,
72
80
  'warning': $warning,
73
81
  'danger': $error,
74
82
  )
75
83
  );
76
84
 
85
+ $signal-colors: () !default;
86
+ $signal-colors: map.merge(
87
+ $signal-colors,
88
+ (
89
+ 'success-green': $success-green,
90
+ 'error-red': $error-red,
91
+ 'warning-orange': $warning-orange,
92
+ 'success-background': $success-background,
93
+ 'error-background': $error-background,
94
+ 'warning-background': $warning-background,
95
+ )
96
+ );
97
+
77
98
  $accent-colors: () !default;
78
99
  $accent-colors: map.merge(
79
100
  $accent-colors,
@@ -111,6 +132,7 @@ $background-colors: map.merge(
111
132
  // Merge with the other lists
112
133
  $background-colors: map.merge($background-colors, $contextual-colors);
113
134
  $background-colors: map.merge($background-colors, $accent-colors);
135
+ $background-colors: map.merge($background-colors, $signal-colors);
114
136
 
115
137
  // Compile a list of dark backgrounds, used in the :is selector mixin at mixins/color
116
138
  $dark-backgrounds: () !default;
@@ -17,6 +17,9 @@ $box-shadow: 0 0 5px 0 rgba(color.$black, 0.3) !default;
17
17
  $box-shadow-lg: 0 0 8px 0 rgba(color.$black, 0.4) !default;
18
18
  $box-shadow-hover: 0 0 1rem 0 rgba(color.$black, 0.08) !default;
19
19
 
20
+ $outline-width: 2px !default;
21
+ $outline-color: #1976c8 !default;
22
+
20
23
  $caret-width: 0.3em !default;
21
24
 
22
25
  // Z-index master list
@@ -5,33 +5,11 @@
5
5
  $grid-breakpoints-list: xs sm rg md lg xl xxl;
6
6
 
7
7
  // Grid containers
8
- //
9
- // Define the maximum width of `.container` for different screen sizes.
10
8
  $container-max-widths: (
11
9
  xl: 1280px,
12
10
  xxl: 1440px,
13
11
  ) !default;
14
12
 
15
- // Grid columns
16
- //
17
- // Set the number of columns and specify the width of the gutters.
18
-
19
- $grid-columns: 12 !default;
20
-
21
- /* Deprecated: $grid-gutter-width */
22
- $grid-gutter-width: 30px !default;
23
-
24
- /* Deprecated: "rg" breakpoint */
25
- $grid-gutter-x: (
26
- xs: 12px,
27
- sm: 16px,
28
- rg: 16px,
29
- md: 16px,
30
- lg: 16px,
31
- xl: 16px,
32
- xxl: 16px,
33
- ) !default;
34
-
35
13
  /* Deprecated: "rg" breakpoint */
36
14
  $grid-container-padding: (
37
15
  xs: 12px,
@@ -53,3 +31,20 @@ $grid-container-fluid-padding: (
53
31
  xl: map.get($grid-container-padding, lg),
54
32
  xxl: map.get($grid-container-padding, lg),
55
33
  ) !default;
34
+
35
+ // Grid columns
36
+ $grid-columns: 12 !default;
37
+
38
+ /* Deprecated: $grid-gutter-width */
39
+ $grid-gutter-width: 30px !default;
40
+
41
+ /* Deprecated: "rg" breakpoint */
42
+ $grid-gutter-x: (
43
+ xs: 12px,
44
+ sm: 16px,
45
+ rg: 16px,
46
+ md: 16px,
47
+ lg: 16px,
48
+ xl: 16px,
49
+ xxl: 16px,
50
+ ) !default;
@@ -9,28 +9,30 @@
9
9
  @use './button';
10
10
 
11
11
  $accordion-padding: spacing.$spacer !default;
12
+ $accordion-gap: spacing.$size-mini !default;
12
13
  $accordion-border-width: commons.$border-thick !default;
13
- $accordion-border-color: color.$gray-10 !default;
14
+ $accordion-border-color: color.$gray-60 !default;
14
15
 
15
- $accordion-header-font-curve: 'regular' !default;
16
+ $accordion-header-color: color.$gray-80 !default;
17
+ $accordion-header-font-size: type.$font-size-16 !default;
16
18
  $accordion-header-font-weight: type.$font-weight-bold !default;
17
19
  $accordion-header-line-height: type.$line-height-copy !default;
18
20
 
19
- $accordion-button-cursor: pointer !default;
21
+ $accordion-button-transition: button.$btn-transition !default;
20
22
  $accordion-button-padding: $accordion-padding !default;
23
+ $accordion-button-gap: $accordion-gap !default;
21
24
  $accordion-button-disabled-opacity: button.$btn-disabled-opacity !default;
22
25
  $accordion-button-focus-box-shadow: button.$btn-focus-box-shadow !default;
26
+ $accordion-button-hover-color: color.$black !default;
27
+ $accordion-button-hover-bg: color.$gray-10 !default;
23
28
 
24
29
  $accordion-icon-name: 2112 !default;
25
30
  $accordion-icon-size: spacing.$size-large !default;
26
31
  $accordion-icon-transition: transform animation.$transition-base-timing !default;
27
32
  $accordion-icon-transform: rotate(-180deg) !default;
28
33
 
29
- $accordion-body-padding: spacing.$size-small-regular $accordion-padding spacing.$size-bigger-big !default;
30
-
31
- $accordion-heading-margin: spacing.$size-bigger-big 0 0 !default;
32
- $accordion-heading-font-curve: $accordion-header-font-curve !default;
33
- $accordion-heading-font-weight: $accordion-header-font-weight !default;
34
+ $accordion-body-padding: $accordion-gap $accordion-padding $accordion-padding !default;
35
+ $accordion-body-font-weight: type.$font-weight-light !default;
34
36
 
35
37
  // Deprecated
36
38
  $accordion-padding-x: spacing.$size-regular !default;
@@ -54,3 +56,8 @@ $_accordion-hcm-chevron: icons.get-colored-svg-url(2113, color.$white);
54
56
  $accordion-button-icon: url($_accordion-chevron);
55
57
  $accordion-button-active-icon: url($_accordion-active-chevron);
56
58
  $accordion-hcm-icon: url($_accordion-hcm-chevron);
59
+ $accordion-header-font-curve: 'regular' !default;
60
+ $accordion-heading-margin: spacing.$size-bigger-big 0 0 !default;
61
+ $accordion-heading-font-curve: $accordion-header-font-curve !default;
62
+ $accordion-heading-font-weight: $accordion-header-font-weight !default;
63
+ $accordion-button-cursor: pointer !default;
@@ -7,7 +7,17 @@ $form-select-disabled-color: forms.$input-disabled-color;
7
7
  $form-select-disabled-bg: forms.$input-disabled-bg;
8
8
  $form-select-disabled-border-color: forms.$input-disabled-border-color;
9
9
  $form-select-indicator-color: color.$black;
10
- $form-select-bg-size: 24px 24px !default;
10
+ $form-select-bg-size: 32px 32px !default;
11
+ $form-select-bg-size-sm: 24px 24px !default;
11
12
  $_form-select-indicator-icon: icons.get-colored-svg-url('2113', $form-select-indicator-color);
12
13
  $form-select-indicator: url($_form-select-indicator-icon) !default;
14
+ $form-select-indicator-disabled: url(icons.get-colored-svg-url(
15
+ '2113',
16
+ $form-select-disabled-color
17
+ )) !default;
18
+ $form-select-indicator-success: url(icons.get-colored-svg-url(
19
+ '2105',
20
+ color.$success-green
21
+ )) !default;
22
+ $form-select-indicator-error: url(icons.get-colored-svg-url('2104', color.$error-red)) !default;
13
23
  $form-select-indicator-hcm: url(icons.get-colored-svg-url('2113', color.$white)) !default;
@@ -13,7 +13,7 @@
13
13
  // Forms
14
14
 
15
15
  $form-label-margin-bottom: 0.5rem !default;
16
- $form-label-color: rgba(var(--post-contrast-color-rgb), 0.8) !default;
16
+ $form-label-color: var(--post-contrast-color) !default;
17
17
 
18
18
  $input-padding-y: button.$input-btn-padding-y !default;
19
19
  $input-padding-x: button.$input-btn-padding-x !default;
@@ -33,8 +33,8 @@ $input-line-height-lg: type.$line-height-copy !default;
33
33
 
34
34
  $input-bg: color.$white !default;
35
35
  $input-disabled-bg: rgba(var(--post-contrast-color-inverted-rgb), 0.6) !default;
36
- $input-disabled-color: color.$gray-60; // Design System only
37
- $input-disabled-border-color: color.$gray-20; // Design System only
36
+ $input-disabled-color: color.$gray-40; // Design System only
37
+ $input-disabled-border-color: color.$gray-40; // Design System only
38
38
 
39
39
  $input-color: color.$black !default;
40
40
  $input-border-color: color.$gray-60 !default;
@@ -66,6 +66,13 @@ $input-height-content-sm: type.$font-size-tiny * $input-line-height-sm !default;
66
66
  $input-height-inner-sm: $input-height-content-sm + ($input-padding-y-sm * 2) !default;
67
67
  $input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
68
68
 
69
+ $form-floating-input-height-content-sm: type.$font-size-12 * $input-line-height-sm * 2 !default;
70
+ $form-floating-input-height-inner-sm: $form-floating-input-height-content-sm +
71
+ ($input-padding-y-sm * 2) !default;
72
+ $form-floating-input-height-sm: calc(
73
+ #{$form-floating-input-height-inner-sm} + #{$input-height-border}
74
+ ) !default;
75
+
69
76
  $input-height-content-rg: type.$font-size-regular * $input-line-height-rg !default;
70
77
  $input-height-inner-rg: $input-height-content-rg + ($input-padding-y-rg * 2) !default;
71
78
  $input-height-rg: calc(#{$input-height-inner-rg} + #{$input-height-border}) !default;
@@ -74,7 +81,9 @@ $input-height-content-lg: type.$font-size-medium * $input-line-height-lg !defaul
74
81
  $input-height-inner-lg: $input-height-content-lg + ($input-padding-y-lg * 2) !default; // Design System
75
82
  $input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
76
83
 
77
- $input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
84
+ $input-transition:
85
+ border-color 0.15s ease-in-out,
86
+ box-shadow 0.15s ease-in-out !default;
78
87
 
79
88
  $form-text-color: var(--post-contrast-color);
80
89
  $form-text-font-size: type.$font-size-tiny;
@@ -94,7 +103,9 @@ $form-range-thumb-width: 2rem !default;
94
103
  $form-range-thumb-height: $form-range-thumb-width !default;
95
104
  $form-range-thumb-bg: color.$white !default;
96
105
  $form-range-thumb-border: 2px solid color.$black !default;
97
- $form-range-thumb-focus-box-shadow: 0 0 0 1px color.$black, 0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
106
+ $form-range-thumb-focus-box-shadow:
107
+ 0 0 0 1px color.$black,
108
+ 0 0 0 0.2rem rgba(color.$gray-80, 0.25) !default;
98
109
  $form-range-thumb-focus-box-shadow-width: 0.2rem; // For focus box shadow issue in Edge
99
110
  $form-range-thumb-active-bg: color.$white !default;
100
111
  $form-range-thumb-disabled-bg: $form-range-thumb-bg !default;
@@ -128,7 +139,19 @@ $form-floating-label-padding-t: calc(
128
139
  $form-floating-label-translate-x: $form-floating-padding-x * (1 - $form-floating-label-scale);
129
140
  $form-floating-label-transform: scale($form-floating-label-scale);
130
141
  $form-floating-transition: animation.$transition-base;
131
- $form-floating-transition-in: $form-floating-transition,
142
+ $form-floating-transition-in:
143
+ $form-floating-transition,
132
144
  width 0ms list.nth(animation.$transition-base, 2);
133
- $form-floating-transition-out: $form-floating-transition, width 0ms linear;
145
+ $form-floating-transition-out:
146
+ $form-floating-transition,
147
+ width 0ms linear;
134
148
  $form-floating-select-bg-size: 32px 32px;
149
+
150
+ $form-floating-label-font-size-sm: type.$font-size-12;
151
+ $form-floating-label-font-size-placeholder-sm: type.$font-size-14; // TODO: replace with input font-size after adjustment
152
+ $form-floating-padding-x-sm: $input-padding-x-sm;
153
+ $form-floating-padding-y-sm: $input-padding-y-sm;
154
+ $form-floating-label-height-sm: $form-floating-input-height-inner-sm;
155
+ $form-floating-label-padding-t-sm: calc(
156
+ #{$input-border-width} + #{$form-floating-label-height-sm * 0.5} - #{$form-floating-label-font-size-sm}
157
+ );
@@ -31,7 +31,4 @@ $stepper-link-current-font-weight: type.$font-weight-bold;
31
31
 
32
32
  // DEPRECATED
33
33
  $stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepper-indicator-color)}');
34
- $stepper-indicator-hover-check-icon: url('#{icon-fn.get-colored-svg-url(
35
- '2105',
36
- $stepper-indicator-hover-color
37
- )}');
34
+ $stepper-indicator-hover-check-icon: url('#{icon-fn.get-colored-svg-url('2105',$stepper-indicator-hover-color)}');
@@ -1,2 +0,0 @@
1
- import { Rule } from '@angular-devkit/schematics';
2
- export default function (): Rule;
@@ -1,131 +0,0 @@
1
- "use strict";
2
- /*
3
- * This is a dom-migration example
4
- *
5
- * You can write more than just one update in a migration schematic
6
- * by defining multiple DomUpdates and pass them all to the DomMigration Class.
7
- *
8
- * Important note:
9
- * The order of the DomUpdates is important, because updates are additive.
10
- * This means, every update you register will receive the updated DOM from
11
- * the previous update, and can now make it's own changes.
12
- *
13
- * We use cheerio thogether with htmlparser2 under the hood which makes it possible
14
- * to write updates by defining only two simple parameters:
15
- *
16
- * selector: string
17
- * This is the jQuery like selector which is used to find the elements to be updated.
18
- *
19
- * update: Function
20
- * This is the update function, which receives the cheerio-element as the first argument
21
- * and the cheerio-instance as the second.
22
- * On cheerio-elements you can directly run jQuery like functions to mutate them.
23
- * The cheerio-instance is sometimes helpfull, for example to convert elements in loops
24
- * into a new cheerio-element:
25
- * $elements.filter((i, element) => $(element).hasClass('bla')).addClass('bla-2');
26
- *
27
- * Note:
28
- * It is not possible to remove the selected elements itself.
29
- * Instead you can select the parent elements and then search the elements to remove
30
- * and call the remove function on this elements directly.
31
- * See RemoveElementUpdate example.
32
- *
33
- * To try this example, you must add it as a schematic in your collection.json file
34
- * and you need to add the following code somewhere in your html that should get updated:
35
- *
36
- * <div id="example-dom-element"></div>
37
- *
38
- */
39
- Object.defineProperty(exports, "__esModule", { value: true });
40
- const dom_migration_1 = require("../../utils/dom-migration");
41
- function default_1() {
42
- return (0, dom_migration_1.getDomMigrationRule)(new AddElementUpdate, new AddClassUpdate, new AddAttributeUpdate, new AddTextUpdate, new RemoveElementUpdate, new WrapElementUpdate, new ReplaceWithElementUpdate);
43
- }
44
- exports.default = default_1;
45
- class AddElementUpdate {
46
- constructor() {
47
- this.selector = '.example-dom-element';
48
- this.update = function ($elements) {
49
- $elements.append('<span>It\'s working...</span>');
50
- };
51
- }
52
- }
53
- class AddClassUpdate {
54
- constructor() {
55
- this.selector = '.example-dom-element';
56
- this.update = function ($elements, $) {
57
- $elements
58
- .each((i, element) => {
59
- if (i === 1) {
60
- $(element).addClass('remove');
61
- }
62
- if (i === 2) {
63
- $(element).addClass('wrap');
64
- }
65
- if (i === 3) {
66
- $(element).addClass('replace-with');
67
- }
68
- });
69
- };
70
- }
71
- }
72
- class AddAttributeUpdate {
73
- constructor() {
74
- this.selector = '.example-dom-element > span';
75
- this.update = function ($elements) {
76
- $elements.attr('style', 'padding: 10px; background-color: white;');
77
- };
78
- }
79
- }
80
- class AddTextUpdate {
81
- constructor() {
82
- this.selector = '.example-dom-element > span';
83
- this.update = function ($elements, $) {
84
- $elements
85
- .each((_i, element) => {
86
- const $element = $(element);
87
- $element.text(`${$element.text()} cheerio!`);
88
- });
89
- };
90
- }
91
- }
92
- class RemoveElementUpdate {
93
- constructor() {
94
- this.selector = '.example-dom-element.remove';
95
- this.update = function ($elements) {
96
- $elements.remove();
97
- };
98
- }
99
- }
100
- class WrapElementUpdate {
101
- constructor() {
102
- this.selector = '.example-dom-element.wrap';
103
- this.update = function ($elements, $) {
104
- $elements
105
- .each((_i, element) => {
106
- const $element = $(element);
107
- // to let the update work correctly you need to copy the data from the sourceElement to the distElement
108
- // how to do this depends on the return value of the migration function used on the sourceElement
109
- const $wrapper = $('<div class="example-dom-element-wrapper"></div>').data($element.data());
110
- $element.wrap($wrapper);
111
- });
112
- };
113
- }
114
- }
115
- class ReplaceWithElementUpdate {
116
- constructor() {
117
- this.selector = '.example-dom-element.replace-with';
118
- this.update = function ($elements, $) {
119
- $elements
120
- .each((_i, element) => {
121
- const $element = $(element);
122
- // to let the update work correctly you need to copy the data from the sourceElement to the distElement
123
- // how to do this depends on the return value of the migration function used on the sourceElement
124
- const $replacement = $(`<div class="example-dom-element-wrapper">${$element.prop('outerHTML')}</div>`)
125
- .data($element.data());
126
- $element.replaceWith($replacement);
127
- });
128
- };
129
- }
130
- }
131
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../schematics/migrations/_example-dom-migration/index.ts"],"names":[],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import { Rule } from '@angular-devkit/schematics';
2
- export default function (): Rule;
@@ -1,85 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const constants_1 = require("../../../utils/constants");
4
- const dom_migration_1 = require("../../../utils/dom-migration");
5
- function default_1() {
6
- return (0, dom_migration_1.getDomMigrationRule)(new BadgePillClassUpdate, new BadgeBGClassUpdate, new BadgeOutlineClassUpdate, new BadgeCararraClassUpdate, new BadgeCararraThickClassUpdate);
7
- }
8
- exports.default = default_1;
9
- class BadgePillClassUpdate {
10
- constructor() {
11
- this.selector = '.badge-pill';
12
- }
13
- update($elements) {
14
- $elements
15
- .removeClass('badge-pill')
16
- .addClass('rounded-pill');
17
- }
18
- }
19
- class BadgeBGClassUpdate {
20
- constructor() {
21
- this.cssClassRegex = new RegExp(`^badge-(${constants_1.themeColors.join('|')})$`);
22
- this.selector = constants_1.themeColors.map(colorname => `.badge-${colorname}`).join(', ');
23
- }
24
- update($elements, $) {
25
- $elements
26
- .each((_i, element) => {
27
- var _a;
28
- const $element = $(element);
29
- (_a = $element
30
- .attr('class')) === null || _a === void 0 ? void 0 : _a.split(' ').forEach(cssClass => {
31
- const match = cssClass.match(this.cssClassRegex);
32
- if (match) {
33
- const colorname = match[1];
34
- $element
35
- .removeClass(cssClass)
36
- .addClass(`bg-${colorname}`);
37
- }
38
- });
39
- });
40
- }
41
- }
42
- class BadgeOutlineClassUpdate {
43
- constructor() {
44
- this.cssClassRegex = new RegExp(`^badge-outline-(${constants_1.themeColors.join('|')})$`);
45
- this.selector = constants_1.themeColors.map(colorname => `.badge-outline-${colorname}`).join(', ');
46
- }
47
- update($elements, $) {
48
- $elements
49
- .each((_i, element) => {
50
- var _a;
51
- const $element = $(element);
52
- (_a = $element
53
- .attr('class')) === null || _a === void 0 ? void 0 : _a.split(' ').forEach(cssClass => {
54
- const match = cssClass.match(this.cssClassRegex);
55
- if (match) {
56
- const colorname = match[1];
57
- $element
58
- .removeClass(cssClass)
59
- .addClass(`border-${colorname}`);
60
- }
61
- });
62
- });
63
- }
64
- }
65
- class BadgeCararraClassUpdate {
66
- constructor() {
67
- this.selector = '.badge-gray-cararra';
68
- }
69
- update($elements) {
70
- $elements
71
- .removeClass('badge-gray-cararra')
72
- .addClass('bg-light');
73
- }
74
- }
75
- class BadgeCararraThickClassUpdate {
76
- constructor() {
77
- this.selector = '.badge-outline-gray-cararra-thick';
78
- }
79
- update($elements) {
80
- $elements
81
- .removeClass('badge-outline-gray-cararra-thick')
82
- .addClass('border-light border-2');
83
- }
84
- }
85
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../schematics/migrations/bootstrap/badge/index.ts"],"names":[],"mappings":"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"}
@@ -1,2 +0,0 @@
1
- import { Rule } from '@angular-devkit/schematics';
2
- export default function (): Rule;