@lucca-front/scss 20.3.0-rc.2 → 20.3.0-rc.4

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 (133) hide show
  1. package/dist/lucca-front.min.css +1 -1
  2. package/package.json +2 -2
  3. package/src/commons/config.scss +0 -5
  4. package/src/commons/core.scss +3 -3
  5. package/src/commons/exports.scss +1 -0
  6. package/src/commons/index.scss +2 -9
  7. package/src/commons/utils/index.scss +478 -480
  8. package/src/commons/utils/reset.scss +1 -1
  9. package/src/components/_sample/index.scss +6 -14
  10. package/src/components/appLayout/index.scss +7 -11
  11. package/src/components/avatar/index.scss +35 -43
  12. package/src/components/box/index.scss +14 -20
  13. package/src/components/breadcrumbs/index.scss +10 -16
  14. package/src/components/button/index.scss +134 -140
  15. package/src/components/button/mods.scss +0 -17
  16. package/src/components/buttonGroup/index.scss +8 -20
  17. package/src/components/calendar/index.scss +44 -56
  18. package/src/components/callout/index.scss +4 -8
  19. package/src/components/calloutDisclosure/index.scss +9 -15
  20. package/src/components/calloutFeedbackList/index.scss +4 -8
  21. package/src/components/calloutPopover/index.scss +12 -18
  22. package/src/components/card/component.scss +1 -0
  23. package/src/components/card/index.scss +23 -25
  24. package/src/components/card/mods.scss +31 -0
  25. package/src/components/checkbox/index.scss +30 -36
  26. package/src/components/checkboxField/index.scss +80 -90
  27. package/src/components/chip/index.scss +17 -23
  28. package/src/components/clear/index.scss +17 -23
  29. package/src/components/code/index.scss +4 -8
  30. package/src/components/collapse/index.scss +7 -11
  31. package/src/components/comment/index.scss +20 -30
  32. package/src/components/container/index.scss +25 -29
  33. package/src/components/contentSection/index.scss +2 -4
  34. package/src/components/dataTable/index.scss +52 -68
  35. package/src/components/dataTableSticked/index.scss +24 -32
  36. package/src/components/dateField/index.scss +20 -24
  37. package/src/components/dateRangeField/index.scss +25 -29
  38. package/src/components/dialog/index.scss +36 -40
  39. package/src/components/divider/index.scss +7 -11
  40. package/src/components/dropdown/component.scss +43 -17
  41. package/src/components/dropdown/index.scss +9 -12
  42. package/src/components/dropdown/mods.scss +4 -4
  43. package/src/components/dropdown/states.scss +4 -3
  44. package/src/components/dropdown/vars.scss +8 -6
  45. package/src/components/emptyState/index.scss +7 -11
  46. package/src/components/errorPage/index.scss +4 -8
  47. package/src/components/fancyBox/index.scss +4 -8
  48. package/src/components/field/index.scss +76 -96
  49. package/src/components/fieldset/index.scss +12 -18
  50. package/src/components/file/index.scss +30 -38
  51. package/src/components/fileEntry/index.scss +18 -24
  52. package/src/components/fileToolbar/index.scss +6 -10
  53. package/src/components/fileUpload/index.scss +31 -37
  54. package/src/components/filterBar/index.scss +13 -17
  55. package/src/components/filterBarDeprecated/index.scss +4 -8
  56. package/src/components/filterPill/index.scss +48 -56
  57. package/src/components/filters/index.scss +8 -14
  58. package/src/components/footer/index.scss +34 -38
  59. package/src/components/form/index.scss +84 -114
  60. package/src/components/form/mods.scss +5 -7
  61. package/src/components/formLabel/index.scss +13 -19
  62. package/src/components/gauge/index.scss +20 -26
  63. package/src/components/grid/index.scss +21 -25
  64. package/src/components/header/index.scss +12 -18
  65. package/src/components/highlightData/index.scss +24 -28
  66. package/src/components/horizontalNavigation/index.scss +36 -42
  67. package/src/components/index.scss +55 -57
  68. package/src/components/indexTable/index.scss +56 -54
  69. package/src/components/inlineMessage/index.scss +12 -18
  70. package/src/components/inputFramed/index.scss +24 -30
  71. package/src/components/label/index.scss +9 -13
  72. package/src/components/layout/index.scss +45 -51
  73. package/src/components/link/index.scss +8 -14
  74. package/src/components/link/mods.scss +1 -1
  75. package/src/components/list/index.scss +11 -15
  76. package/src/components/listboxOption/index.scss +115 -131
  77. package/src/components/listing/index.scss +18 -22
  78. package/src/components/loading/index.scss +23 -27
  79. package/src/components/main/index.scss +15 -21
  80. package/src/components/mainLayout/index.scss +20 -26
  81. package/src/components/mobileHeader/index.scss +4 -8
  82. package/src/components/mobileNavigation/index.scss +2 -4
  83. package/src/components/mobilePush/index.scss +4 -8
  84. package/src/components/multiSelect/index.scss +36 -46
  85. package/src/components/navside/index.scss +56 -78
  86. package/src/components/newBadge/index.scss +4 -8
  87. package/src/components/notchBox/index.scss +13 -17
  88. package/src/components/notchBox/mods.scss +125 -137
  89. package/src/components/numericBadge/index.scss +16 -22
  90. package/src/components/pageHeader/index.scss +22 -26
  91. package/src/components/pagination/index.scss +6 -12
  92. package/src/components/plgPush/index.scss +2 -4
  93. package/src/components/popover/component.scss +0 -17
  94. package/src/components/popover/index.scss +2 -4
  95. package/src/components/progress/index.scss +9 -15
  96. package/src/components/radio/index.scss +12 -18
  97. package/src/components/radioButtons/index.scss +9 -15
  98. package/src/components/radioField/index.scss +40 -46
  99. package/src/components/readMore/index.scss +15 -21
  100. package/src/components/richText/index.scss +14 -20
  101. package/src/components/scrollBox/index.scss +10 -14
  102. package/src/components/section/index.scss +12 -16
  103. package/src/components/segmentedControl/index.scss +15 -25
  104. package/src/components/simpleSelect/index.scss +33 -41
  105. package/src/components/skeleton/index.scss +37 -43
  106. package/src/components/skipLinks/index.scss +2 -4
  107. package/src/components/sortableList/index.scss +6 -12
  108. package/src/components/statusBadge/index.scss +4 -8
  109. package/src/components/switch/index.scss +29 -35
  110. package/src/components/switchField/index.scss +16 -22
  111. package/src/components/table/index.scss +64 -78
  112. package/src/components/tableFixed/index.scss +11 -13
  113. package/src/components/tableFixedDeprecated/index.scss +10 -14
  114. package/src/components/tableOfContent/index.scss +24 -28
  115. package/src/components/tableSortable/index.scss +16 -22
  116. package/src/components/tableSticked/index.scss +24 -28
  117. package/src/components/tableSticked/mods.scss +6 -6
  118. package/src/components/tableStickedDeprecated/index.scss +40 -46
  119. package/src/components/tag/index.scss +23 -29
  120. package/src/components/textField/index.scss +22 -30
  121. package/src/components/textField/mods.scss +1 -1
  122. package/src/components/textFlow/index.scss +2 -4
  123. package/src/components/textfields/index.scss +258 -279
  124. package/src/components/timeline/index.scss +66 -72
  125. package/src/components/timepicker/index.scss +15 -21
  126. package/src/components/title/index.scss +30 -43
  127. package/src/components/title/mods.scss +1 -1
  128. package/src/components/titleSection/index.scss +23 -31
  129. package/src/components/toast/index.scss +4 -8
  130. package/src/components/tooltip/index.scss +21 -25
  131. package/src/components/userPopover/index.scss +2 -4
  132. package/src/components/userTile/index.scss +22 -26
  133. package/src/components/verticalNavigation/index.scss +16 -26
package/src/components/multiSelect/index.scss CHANGED
@@ -1,71 +1,61 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .multiSelect {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
8
-
9
- @layer mods {
10
- &.mod-S {
11
- @include S;
12
- }
4
+ @include vars;
5
+ @include component;
13
6
 
14
- &.mod-filterPill {
15
- @include filterPill;
16
- }
7
+ &.mod-S {
8
+ @include S;
17
9
  }
18
10
 
19
- @layer states {
20
- &.is-selected {
21
- @include selected;
22
- }
11
+ &:has(.multipleSelect-displayer-search:focus-visible) {
12
+ @include focused;
13
+ }
23
14
 
24
- &:has(.multipleSelect-displayer-search:focus-visible) {
25
- @include focused;
26
- }
15
+ &:has(.multipleSelect-displayer-search[aria-invalid='true']) {
16
+ @include invalid;
17
+ }
27
18
 
28
- &:has(.multipleSelect-displayer-search[aria-invalid='true']) {
29
- @include invalid;
30
- }
19
+ &:has(.multipleSelect-displayer-search:disabled) {
20
+ @include disabled;
21
+ }
31
22
 
32
- &:has(.multipleSelect-displayer-search:disabled) {
33
- @include disabled;
34
- }
23
+ &:has([aria-expanded='true']) {
24
+ @include expanded;
25
+ }
35
26
 
27
+ &:not(.mod-noClueIcon) {
28
+ &:has(.multipleSelect-displayer-search:focus-visible),
36
29
  &:has([aria-expanded='true']) {
37
- @include expanded;
38
- }
39
-
40
- &:not(.mod-noClueIcon) {
41
- &:has(.multipleSelect-displayer-search:focus-visible),
42
- &:has([aria-expanded='true']) {
43
- &:not(:has(.multipleSelect-displayer-search:read-only)) {
44
- @include searchable;
45
- }
30
+ &:not(:has(.multipleSelect-displayer-search:read-only)) {
31
+ @include searchable;
46
32
  }
47
33
  }
48
34
  }
35
+
36
+ &.is-selected {
37
+ @include selected;
38
+ }
39
+
40
+ &.mod-filterPill {
41
+ @include filterPill;
42
+ }
49
43
  }
50
44
 
51
45
  .multipleSelect-displayer-filter {
52
- @layer components {
53
- min-inline-size: 0;
54
- }
46
+ min-inline-size: 0;
55
47
  }
56
48
 
57
49
  .multipleSelect-displayer {
58
- @layer mods {
59
- &.mod-filter {
60
- @include displayerFilter;
50
+ &.mod-filter {
51
+ @include displayerFilter;
61
52
 
62
- &.is-filled {
63
- @include displayerFilterFilled;
64
- }
53
+ &.is-filled {
54
+ @include displayerFilterFilled;
55
+ }
65
56
 
66
- &:has([aria-expanded='true']):not(:has(:placeholder-shown)) {
67
- @include displayerFilterExpanded;
68
- }
57
+ &:has([aria-expanded='true']):not(:has(:placeholder-shown)) {
58
+ @include displayerFilterExpanded;
69
59
  }
70
60
  }
71
61
  }
package/src/components/navside/index.scss CHANGED
@@ -3,105 +3,87 @@
3
3
  @use 'exports' as *;
4
4
 
5
5
  .navSide {
6
- @layer components {
7
- @include vars;
8
- @include component;
6
+ @include vars;
7
+ @include component;
9
8
 
10
- .appLayout-navSide & {
11
- @include media.min('S') {
12
- @include inAppLayoutWide;
13
- }
9
+ .appLayout-navSide & {
10
+ @include media.min('S') {
11
+ @include inAppLayoutWide;
12
+ }
14
13
 
15
- @include media.max('S') {
16
- @include inAppLayoutNarrow;
17
- }
14
+ @include media.max('S') {
15
+ @include inAppLayoutNarrow;
18
16
  }
19
17
  }
20
18
 
21
- @layer mods {
22
- &.mod-withBanner {
23
- @include banner;
24
- }
19
+ &.mod-withBanner {
20
+ @include banner;
21
+ }
25
22
 
26
- &.mod-compact {
27
- @include media.min('S') {
28
- @include compact;
23
+ &.mod-compact {
24
+ @include media.min('S') {
25
+ @include compact;
29
26
 
30
- .navSide-item-link {
31
- &:hover {
32
- @include compactHover;
33
- }
27
+ .navSide-item-link {
28
+ &:hover {
29
+ @include compactHover;
30
+ }
34
31
 
35
- &:is(.is-active, .active) {
36
- @include compactActive;
37
- }
32
+ &:is(.is-active, .active) {
33
+ @include compactActive;
38
34
  }
39
35
  }
40
36
  }
41
37
  }
42
38
 
43
- @layer mods {
44
- @include media.max('S') {
45
- @include mobile;
46
- }
47
- }
39
+ @include media.max('S') {
40
+ @include mobile;
48
41
 
49
- @layer states {
50
- @include media.max('S') {
51
- &:not(.is-open, .open) {
52
- .navSide-item {
53
- &:not(.mod-mobileToggle) {
54
- @include mobileHidden;
55
- }
42
+ &:not(.is-open, .open) {
43
+ .navSide-item {
44
+ &:not(.mod-mobileToggle) {
45
+ @include mobileHidden;
56
46
  }
57
47
  }
48
+ }
58
49
 
59
- &:is(.is-open, .open) {
60
- @include mobileOpen;
61
-
62
- &.mod-withBanner {
63
- @include mobileOpenBanner;
50
+ &.mod-withBanner {
51
+ .navSide-item {
52
+ &.mod-mobileToggle {
53
+ @include banner;
64
54
  }
65
55
  }
66
56
  }
67
- }
68
57
 
69
- @layer mods {
70
- @include media.max('S') {
58
+ &:is(.is-open, .open) {
59
+ @include mobileOpen;
60
+
71
61
  &.mod-withBanner {
72
- .navSide-item {
73
- &.mod-mobileToggle {
74
- @include banner;
75
- }
76
- }
62
+ @include mobileOpenBanner;
77
63
  }
78
64
  }
79
65
  }
80
66
  }
81
67
 
82
68
  .navSide-item {
83
- @layer mods {
84
- &.mod-mobileToggle {
85
- @include mobileToggle;
86
- }
69
+ &:not(.is-open) {
70
+ @include notOpen;
87
71
  }
88
72
 
89
- @layer states {
90
- &:not(.is-open) {
91
- @include notOpen;
92
- }
73
+ &.mod-mobileToggle {
74
+ @include mobileToggle;
75
+ }
93
76
 
94
- &:is(.is-open, .open) {
95
- @include expanded;
77
+ &:is(.is-open, .open) {
78
+ @include expanded;
96
79
 
97
- .navSide-item-subMenu-link {
98
- &:is(:hover) {
99
- @include sublinkHover;
100
- }
80
+ .navSide-item-subMenu-link {
81
+ &:is(:hover) {
82
+ @include sublinkHover;
83
+ }
101
84
 
102
- &:is(.is-active, .active) {
103
- @include sublinkActive;
104
- }
85
+ &:is(.is-active, .active) {
86
+ @include sublinkActive;
105
87
  }
106
88
  }
107
89
  }
@@ -109,23 +91,19 @@
109
91
 
110
92
  .navSide-item-subMenu-link,
111
93
  .navSide-item-link {
112
- @layer states {
113
- &:is(.is-active, .active) {
114
- @include active;
115
- }
94
+ &:is(.is-active, .active) {
95
+ @include active;
96
+ }
116
97
 
117
- &:is([aria-expanded='true']) {
118
- @include expanded;
119
- }
98
+ &:is([aria-expanded='true']) {
99
+ @include expanded;
120
100
  }
121
101
  }
122
102
 
123
103
  html {
124
- @layer states {
125
- &:is(.hasMenu, .withMenu) {
126
- @include media.max('S') {
127
- @include overlay;
128
- }
104
+ &:is(.hasMenu, .withMenu) {
105
+ @include media.max('S') {
106
+ @include overlay;
129
107
  }
130
108
  }
131
109
  }
package/src/components/newBadge/index.scss CHANGED
@@ -1,14 +1,10 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .newBadge {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-inverted {
11
- @include inverted;
12
- }
7
+ &.mod-inverted {
8
+ @include inverted;
13
9
  }
14
10
  }
package/src/components/notchBox/index.scss CHANGED
@@ -1,26 +1,22 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .notchBox {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-notchTop {
11
- @include notchTop;
12
- }
7
+ &.mod-notchTop {
8
+ @include notchTop;
9
+ }
13
10
 
14
- &.mod-notchLeft {
15
- @include notchLeft;
16
- }
11
+ &.mod-notchLeft {
12
+ @include notchLeft;
13
+ }
17
14
 
18
- &.mod-notchRight {
19
- @include notchRight;
20
- }
15
+ &.mod-notchRight {
16
+ @include notchRight;
17
+ }
21
18
 
22
- &.mod-notchBottom {
23
- @include notchBottom;
24
- }
19
+ &.mod-notchBottom {
20
+ @include notchBottom;
25
21
  }
26
22
  }
package/src/components/notchBox/mods.scss CHANGED
@@ -1,149 +1,140 @@
1
1
  // stylelint-disable custom-property-empty-line-before -- Complex code with visual grouping of declarations.
2
2
 
3
3
  %commons {
4
- @layer mods {
5
- --smooth: 1px;
6
- --component-notchbox-notch-radius-outer: var(--component-notchbox-notch-radius);
7
- --component-notchbox-notch-padding: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding));
8
- --component-notchbox-notch-percent-offset: var(--component-notchbox-notch-percent, 0) * var(--component-notchbox-notch-radius-inner);
9
- --component-notchbox-notch-percent-offset2: (1 - var(--component-notchbox-notch-percent, 0)) *
10
- var(--component-notchbox-notch-radius-inner);
11
- --component-notchbox-badge-anchor: calc(
12
- var(--component-notchbox-badge-offset) * -1 + (var(--component-notchbox-notch-height) - var(--component-notchbox-badge-height)) / 2
13
- );
14
- }
4
+ --smooth: 1px;
5
+ --component-notchbox-notch-radius-outer: var(--component-notchbox-notch-radius);
6
+ --component-notchbox-notch-padding: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding));
7
+ --component-notchbox-notch-percent-offset: var(--component-notchbox-notch-percent, 0) * var(--component-notchbox-notch-radius-inner);
8
+ --component-notchbox-notch-percent-offset2: (1 - var(--component-notchbox-notch-percent, 0)) *
9
+ var(--component-notchbox-notch-radius-inner);
10
+ --component-notchbox-badge-anchor: calc(
11
+ var(--component-notchbox-badge-offset) * -1 + (var(--component-notchbox-notch-height) - var(--component-notchbox-badge-height)) / 2
12
+ );
15
13
  }
16
14
 
17
15
  %mod-vertical {
18
- @layer mods {
19
- @extend %commons;
20
-
21
- --component-notchbox-box-min-height: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding) * 2);
22
- --component-notchbox-notch-gradient1-ref1: 100%;
23
- --component-notchbox-notch-gradient1-ref2: calc(100% - var(--component-notchbox-notch-height));
24
-
25
- --component-notchbox-notch-gradient2-anchor: left;
26
- --component-notchbox-notch-gradient2-ref1: calc(
27
- var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width)) /
28
- 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth) * 2
29
- );
30
- --component-notchbox-notch-gradient2-ref2: 100%;
31
-
32
- --component-notchbox-notch-gradient3-anchor: right;
33
- --component-notchbox-notch-gradient3-ref1: calc(
34
- 100% -
35
- (
36
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
37
- var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
38
- )
39
- );
40
- --component-notchbox-notch-gradient3-ref2: 100%;
41
-
42
- --component-notchbox-notch-gradient4-x: calc(
43
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
44
- 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
45
- );
46
-
47
- --component-notchbox-notch-gradient5-x: calc(
48
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
49
- var(--smooth)
50
- );
51
- --component-notchbox-notch-gradient5-y: var(--component-notchbox-notch-gradient4-y);
52
-
53
- --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
54
- --component-notchbox-notch-gradient6-ref1: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
55
- --component-notchbox-notch-gradient6-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
56
-
57
- --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
58
- --component-notchbox-notch-gradient7-ref1: calc(
59
- 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
60
- );
61
- --component-notchbox-notch-gradient7-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
62
-
63
- --component-notchbox-notch-gradient8-x: calc(
64
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
65
- var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
66
- );
67
-
68
- --component-notchbox-notch-gradient9-x: calc(
69
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
70
- var(--smooth) * 2
71
- );
72
- --component-notchbox-notch-gradient9-y: var(--component-notchbox-notch-gradient8-y);
73
-
74
- // badge
75
- --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-width);
76
- --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-height);
77
- --component-notchbox-badge-left: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
78
- }
16
+ @extend %commons;
17
+ --component-notchbox-box-min-height: calc(var(--component-notchbox-notch-height) + var(--component-notchbox-box-padding) * 2);
18
+ --component-notchbox-notch-gradient1-ref1: 100%;
19
+ --component-notchbox-notch-gradient1-ref2: calc(100% - var(--component-notchbox-notch-height));
20
+
21
+ --component-notchbox-notch-gradient2-anchor: left;
22
+ --component-notchbox-notch-gradient2-ref1: calc(
23
+ var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width)) /
24
+ 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth) * 2
25
+ );
26
+ --component-notchbox-notch-gradient2-ref2: 100%;
27
+
28
+ --component-notchbox-notch-gradient3-anchor: right;
29
+ --component-notchbox-notch-gradient3-ref1: calc(
30
+ 100% -
31
+ (
32
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
33
+ var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
34
+ )
35
+ );
36
+ --component-notchbox-notch-gradient3-ref2: 100%;
37
+
38
+ --component-notchbox-notch-gradient4-x: calc(
39
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
40
+ 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
41
+ );
42
+
43
+ --component-notchbox-notch-gradient5-x: calc(
44
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
45
+ var(--smooth)
46
+ );
47
+ --component-notchbox-notch-gradient5-y: var(--component-notchbox-notch-gradient4-y);
48
+
49
+ --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
50
+ --component-notchbox-notch-gradient6-ref1: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
51
+ --component-notchbox-notch-gradient6-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
52
+
53
+ --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
54
+ --component-notchbox-notch-gradient7-ref1: calc(
55
+ 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
56
+ );
57
+ --component-notchbox-notch-gradient7-ref2: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
58
+
59
+ --component-notchbox-notch-gradient8-x: calc(
60
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
61
+ var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
62
+ );
63
+
64
+ --component-notchbox-notch-gradient9-x: calc(
65
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
66
+ var(--smooth) * 2
67
+ );
68
+ --component-notchbox-notch-gradient9-y: var(--component-notchbox-notch-gradient8-y);
69
+
70
+ /** badge */
71
+ --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-width);
72
+ --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-height);
73
+ --component-notchbox-badge-left: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
79
74
  }
80
75
 
81
76
  %mod-horizontal {
82
- @layer mods {
83
- @extend %commons;
84
-
85
- --component-notchbox-box-min-height: calc(var(--component-notchbox-notch-width) + var(--component-notchbox-box-padding) * 2);
86
- --component-notchbox-notch-gradient1-ref1: calc(100% - var(--component-notchbox-notch-height));
87
- --component-notchbox-notch-gradient1-ref2: 100%;
88
-
89
- --component-notchbox-notch-gradient2-anchor: top;
90
- --component-notchbox-notch-gradient2-ref1: 100%;
91
- --component-notchbox-notch-gradient2-ref2: calc(
92
- var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer))
93
- );
94
-
95
- --component-notchbox-notch-gradient3-anchor: bottom;
96
- --component-notchbox-notch-gradient3-ref1: 100%;
97
- --component-notchbox-notch-gradient3-ref2: calc(
98
- 100% -
99
- (
100
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
101
- var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
102
- )
103
- );
104
-
105
- --component-notchbox-notch-gradient4-y: calc(
106
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
107
- 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
108
- );
109
-
110
- --component-notchbox-notch-gradient5-x: var(--component-notchbox-notch-gradient4-x);
111
- --component-notchbox-notch-gradient5-y: calc(
112
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
113
- var(--smooth)
114
- );
115
-
116
- --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
117
- --component-notchbox-notch-gradient6-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
118
- --component-notchbox-notch-gradient6-ref2: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
119
-
120
- --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
121
- --component-notchbox-notch-gradient7-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
122
- --component-notchbox-notch-gradient7-ref2: calc(
123
- 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
124
- );
125
-
126
- --component-notchbox-notch-gradient8-y: calc(
127
- var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
128
- var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
129
- );
130
-
131
- --component-notchbox-notch-gradient9-x: var(--component-notchbox-notch-gradient8-x);
132
- --component-notchbox-notch-gradient9-y: calc(
133
- var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
134
- var(--smooth) * 2
135
- );
136
-
137
- // badge
138
- --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-height);
139
- --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-width);
140
- --component-notchbox-badge-top: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
141
- }
77
+ @extend %commons;
78
+ --component-notchbox-box-min-height: calc(var(--component-notchbox-notch-width) + var(--component-notchbox-box-padding) * 2);
79
+ --component-notchbox-notch-gradient1-ref1: calc(100% - var(--component-notchbox-notch-height));
80
+ --component-notchbox-notch-gradient1-ref2: 100%;
81
+
82
+ --component-notchbox-notch-gradient2-anchor: top;
83
+ --component-notchbox-notch-gradient2-ref1: 100%;
84
+ --component-notchbox-notch-gradient2-ref2: calc(
85
+ var(--component-notchbox-notch-position) - (var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer))
86
+ );
87
+
88
+ --component-notchbox-notch-gradient3-anchor: bottom;
89
+ --component-notchbox-notch-gradient3-ref1: 100%;
90
+ --component-notchbox-notch-gradient3-ref2: calc(
91
+ 100% -
92
+ (
93
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 +
94
+ var(--component-notchbox-notch-radius-outer) + var(--smooth) * 2
95
+ )
96
+ );
97
+
98
+ --component-notchbox-notch-gradient4-y: calc(
99
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) /
100
+ 2 - var(--component-notchbox-notch-radius-outer) - var(--smooth)
101
+ );
102
+
103
+ --component-notchbox-notch-gradient5-x: var(--component-notchbox-notch-gradient4-x);
104
+ --component-notchbox-notch-gradient5-y: calc(
105
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 + var(--component-notchbox-notch-radius-outer) +
106
+ var(--smooth)
107
+ );
108
+
109
+ --component-notchbox-notch-gradient6-anchor: var(--component-notchbox-notch-gradient2-anchor);
110
+ --component-notchbox-notch-gradient6-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
111
+ --component-notchbox-notch-gradient6-ref2: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2);
112
+
113
+ --component-notchbox-notch-gradient7-anchor: var(--component-notchbox-notch-gradient3-anchor);
114
+ --component-notchbox-notch-gradient7-ref1: calc(100% - var(--component-notchbox-notch-radius-outer) * 2);
115
+ --component-notchbox-notch-gradient7-ref2: calc(
116
+ 100% - (var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2)
117
+ );
118
+
119
+ --component-notchbox-notch-gradient8-y: calc(
120
+ var(--component-notchbox-notch-position) - var(--component-notchbox-notch-width) / 2 +
121
+ var(--component-notchbox-notch-percent-offset) - var(--smooth) * 2
122
+ );
123
+
124
+ --component-notchbox-notch-gradient9-x: var(--component-notchbox-notch-gradient8-x);
125
+ --component-notchbox-notch-gradient9-y: calc(
126
+ var(--component-notchbox-notch-position) + var(--component-notchbox-notch-width) / 2 - var(--component-notchbox-notch-percent-offset2) +
127
+ var(--smooth) * 2
128
+ );
129
+
130
+ /** badge */
131
+ --component-notchbox-badge-actualWidth: var(--component-notchbox-badge-height);
132
+ --component-notchbox-badge-actualHeight: var(--component-notchbox-badge-width);
133
+ --component-notchbox-badge-top: calc(var(--component-notchbox-notch-position) - var(--component-notchbox-badge-width) / 2);
142
134
  }
143
135
 
144
136
  @mixin top {
145
137
  @extend %mod-vertical;
146
-
147
138
  --component-notchbox-notch-gradient1-anchor: bottom;
148
139
  --component-notchbox-notch-gradient4-y: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
149
140
 
@@ -158,7 +149,6 @@
158
149
 
159
150
  @mixin bottom {
160
151
  @extend %mod-vertical;
161
-
162
152
  --component-notchbox-notch-gradient1-anchor: top;
163
153
  --component-notchbox-notch-gradient4-y: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
164
154
 
@@ -173,7 +163,6 @@
173
163
 
174
164
  @mixin left {
175
165
  @extend %mod-horizontal;
176
-
177
166
  --component-notchbox-notch-gradient1-anchor: right;
178
167
  --component-notchbox-notch-gradient4-x: calc(var(--component-notchbox-notch-radius-outer) + var(--smooth));
179
168
  --component-notchbox-notch-gradient8-anchor: 0 100%;
@@ -187,7 +176,6 @@
187
176
 
188
177
  @mixin right {
189
178
  @extend %mod-horizontal;
190
-
191
179
  --component-notchbox-notch-gradient1-anchor: left;
192
180
  --component-notchbox-notch-gradient4-x: calc(100% - (var(--component-notchbox-notch-radius-outer) + var(--smooth)));
193
181
  --component-notchbox-notch-gradient8-anchor: 100% 100%;
@@ -200,7 +188,7 @@
200
188
  --component-notchbox-box-padding-right: var(--component-notchbox-notch-padding);
201
189
  }
202
190
 
203
- // pre configured with DS parameters
191
+ /** pre configured with DS parameters **/
204
192
  @mixin notchTop {
205
193
  @include top;
206
194
  }