@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/chip/index.scss CHANGED
@@ -1,34 +1,28 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .chip {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-S {
11
- @include S;
12
- }
7
+ &.mod-S {
8
+ @include S;
9
+ }
13
10
 
14
- // .palette-primary is deprecated
15
- &.palette-product,
16
- &.palette-primary {
17
- @include product;
18
- }
11
+ // .palette-primary is deprecated
12
+ &.palette-product,
13
+ &.palette-primary {
14
+ @include product;
15
+ }
19
16
 
20
- &.mod-unkillable {
21
- @include unkillable;
22
- }
17
+ &.mod-unkillable {
18
+ @include unkillable;
19
+ }
23
20
 
24
- &.mod-clickable {
25
- @include clickable;
26
- }
21
+ &.mod-clickable {
22
+ @include clickable;
27
23
  }
28
24
 
29
- @layer states {
30
- &.is-disabled {
31
- @include disabled;
32
- }
25
+ &.is-disabled {
26
+ @include disabled;
33
27
  }
34
28
  }
package/src/components/clear/index.scss CHANGED
@@ -1,36 +1,30 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .clear {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-S {
11
- @include S;
12
- }
7
+ &.mod-S {
8
+ @include S;
13
9
  }
14
10
 
15
- @layer states {
16
- // .palette-primary is deprecated
17
- &.palette-product:not([disabled]),
18
- &.palette-primary:not([disabled]) {
19
- @include product;
20
- }
11
+ // .palette-primary is deprecated
12
+ &.palette-product:not([disabled]),
13
+ &.palette-primary:not([disabled]) {
14
+ @include product;
15
+ }
21
16
 
22
- &.mod-inverted:not([disabled]) {
23
- @include inverted;
17
+ &.mod-inverted:not([disabled]) {
18
+ @include inverted;
24
19
 
25
- &.palette-product:not([disabled]) {
26
- @include invertedProduct;
27
- }
20
+ &.palette-product:not([disabled]) {
21
+ @include invertedProduct;
28
22
  }
23
+ }
29
24
 
30
- &[disabled] {
31
- @include disabled;
25
+ &[disabled] {
26
+ @include disabled;
32
27
 
33
- cursor: default;
34
- }
28
+ cursor: default;
35
29
  }
36
30
  }
package/src/components/code/index.scss CHANGED
@@ -1,14 +1,10 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .code {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-block {
11
- @include block;
12
- }
7
+ &.mod-block {
8
+ @include block;
13
9
  }
14
10
  }
package/src/components/collapse/index.scss CHANGED
@@ -1,18 +1,14 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .collapse {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer states {
10
- &:not(.is-open, .open, [open]) {
11
- @include close;
12
- }
7
+ &:not(.is-open, .open, [open]) {
8
+ @include close;
9
+ }
13
10
 
14
- &:is(.is-open, .open, [open]) {
15
- @include open;
16
- }
11
+ &:is(.is-open, .open, [open]) {
12
+ @include open;
17
13
  }
18
14
  }
package/src/components/comment/index.scss CHANGED
@@ -3,48 +3,38 @@
3
3
  @use 'exports' as *;
4
4
 
5
5
  .comment {
6
- @layer components {
7
- @include vars;
8
- @include component;
9
- }
6
+ @include vars;
7
+ @include component;
10
8
 
11
- @layer mods {
12
- &.mod-S {
13
- @include S;
14
- }
9
+ &.mod-S {
10
+ @include S;
11
+ }
15
12
 
16
- &.mod-noAvatar {
17
- @include noAvatar;
18
- }
13
+ &.mod-noAvatar {
14
+ @include noAvatar;
15
+ }
19
16
 
20
- @include container.max(25rem, $name: 'comment') {
21
- @include narrow;
22
- }
17
+ @include container.max(25rem, $name: 'comment') {
18
+ @include narrow;
23
19
  }
24
20
  }
25
21
 
26
22
  .commentWrapper {
27
- @layer components {
28
- @include vars;
29
- }
23
+ @include vars;
30
24
 
31
- @layer mods {
32
- &.mod-S {
33
- @include wrapperS;
34
- }
25
+ &.mod-S {
26
+ @include wrapperS;
27
+ }
35
28
 
36
- &.mod-compact {
37
- @include wrapperCompact;
38
- }
29
+ &.mod-compact {
30
+ @include wrapperCompact;
31
+ }
39
32
 
40
- &.mod-chatAnswer {
41
- @include chatAnswer;
42
- }
33
+ &.mod-chatAnswer {
34
+ @include chatAnswer;
43
35
  }
44
36
  }
45
37
 
46
38
  .commentWrapperChat {
47
- @layer components {
48
- @include chat;
49
- }
39
+ @include chat;
50
40
  }
package/src/components/container/index.scss CHANGED
@@ -2,42 +2,38 @@
2
2
  @use '@lucca-front/scss/src/commons/utils/media';
3
3
 
4
4
  .container {
5
- @layer components {
6
- @include vars;
7
- @include component;
8
- }
5
+ @include vars;
6
+ @include component;
9
7
 
10
- @layer mods {
11
- &.mod-center {
12
- @include center;
13
- }
8
+ &.mod-center {
9
+ @include center;
10
+ }
14
11
 
15
- &.mod-S {
16
- @include S;
17
- }
12
+ &.mod-S {
13
+ @include S;
14
+ }
18
15
 
19
- &.mod-maxM {
20
- @include maxM;
21
- }
16
+ &.mod-maxM {
17
+ @include maxM;
18
+ }
22
19
 
23
- &.mod-maxL {
24
- @include maxL;
25
- }
20
+ &.mod-maxL {
21
+ @include maxL;
22
+ }
26
23
 
27
- &.mod-maxXL {
28
- @include maxXL;
29
- }
24
+ &.mod-maxXL {
25
+ @include maxXL;
26
+ }
30
27
 
31
- &.mod-maxXXL {
32
- @include maxXXL;
33
- }
28
+ &.mod-maxXXL {
29
+ @include maxXXL;
30
+ }
34
31
 
35
- &.mod-maxXXXL {
36
- @include maxXXXL;
37
- }
32
+ &.mod-maxXXXL {
33
+ @include maxXXXL;
34
+ }
38
35
 
39
- &.mod-overflow {
40
- @include overflow;
41
- }
36
+ &.mod-overflow {
37
+ @include overflow;
42
38
  }
43
39
  }
package/src/components/contentSection/index.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .contentSection {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
  }
package/src/components/dataTable/index.scss CHANGED
@@ -1,43 +1,35 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .dataTableWrapper {
4
- @layer components {
5
- @include vars;
6
- }
4
+ @include vars;
7
5
 
8
- @layer mods {
9
- &.mod-nested {
10
- @include nested;
11
- }
6
+ &.mod-nested {
7
+ @include nested;
12
8
  }
13
9
  }
14
10
 
15
11
  .dataTable {
16
- @layer components {
17
- @include component;
18
- }
12
+ @include component;
19
13
 
20
- @layer mods {
21
- &.mod-cellBorder {
22
- @include cellBorder;
23
- }
14
+ &.mod-cellBorder {
15
+ @include cellBorder;
16
+ }
24
17
 
25
- &.mod-alignTop {
26
- @include alignTop;
27
- }
18
+ &.mod-alignTop {
19
+ @include alignTop;
20
+ }
28
21
 
29
- &.mod-layoutFixed {
30
- @include layoutFixed;
31
- }
22
+ &.mod-layoutFixed {
23
+ @include layoutFixed;
24
+ }
32
25
 
33
- &[class*='mod-layoutFixedAtMediaMin'] {
34
- @include layoutFixedWithBreakpoint;
35
- }
26
+ &[class*='mod-layoutFixedAtMediaMin'] {
27
+ @include layoutFixedWithBreakpoint;
28
+ }
36
29
 
37
- // Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
38
- &[class*='mod-layoutFixed'] {
39
- @include layoutFixedCells;
40
- }
30
+ // Allow selection of mod-layoutFixed with or without breakpoints like mod-layoutFixedAtMediaMinXS or mod-layoutFixedAtMediaMaxL
31
+ &[class*='mod-layoutFixed'] {
32
+ @include layoutFixedCells;
41
33
  }
42
34
 
43
35
  &.mod-hover {
@@ -58,69 +50,61 @@
58
50
  }
59
51
 
60
52
  :is(.dataTable-head-row, .dataTable-body-row, .dataTable-foot-row) {
61
- @layer mods {
62
- &.mod-group {
63
- @include group;
64
- }
53
+ &.mod-group {
54
+ @include group;
55
+ }
65
56
 
66
- &.mod-selectable {
67
- @include selectable;
57
+ &.mod-selectable {
58
+ @include selectable;
68
59
 
69
- &:has(input:checked) {
70
- @include selected;
71
- }
60
+ &:has(input:checked) {
61
+ @include selected;
72
62
  }
63
+ }
73
64
 
74
- &.mod-draggable {
75
- @include draggable;
76
- }
65
+ &.mod-draggable {
66
+ @include draggable;
77
67
  }
78
68
  }
79
69
 
80
70
  :is(.dataTable-head-row-cell, .dataTable-body-row-cell, .dataTable-foot-row-cell) {
81
- @layer mods {
82
- &.mod-actions {
83
- @include actions;
84
- }
71
+ &.mod-actions {
72
+ @include actions;
73
+ }
85
74
 
86
- &.mod-alignCenter {
87
- @include alignCenter;
88
- }
75
+ &.mod-alignCenter {
76
+ @include alignCenter;
77
+ }
89
78
 
90
- &.mod-alignRight {
91
- @include alignRight;
92
- }
79
+ &.mod-alignRight {
80
+ @include alignRight;
81
+ }
93
82
 
94
- &.mod-editable {
95
- @include editable;
96
- }
83
+ &.mod-editable {
84
+ @include editable;
85
+ }
97
86
 
98
- &.mod-tree {
99
- @include tree;
100
- }
87
+ &.mod-tree {
88
+ @include tree;
101
89
  }
102
90
  }
103
91
 
104
92
  .dataTable-body-row {
105
- @layer states {
106
- &.is-collapsed {
107
- @include collapsed;
108
- }
93
+ &.is-collapsed {
94
+ @include collapsed;
95
+ }
109
96
 
110
- &:first-child {
111
- &:has(.dataTable-body-row-cell-expand-button.button[aria-expanded='false']) {
112
- ~ .dataTable-body-row {
113
- @include collapsed;
114
- }
97
+ &:first-child {
98
+ &:has(.dataTable-body-row-cell-expand-button.button[aria-expanded='false']) {
99
+ ~ .dataTable-body-row {
100
+ @include collapsed;
115
101
  }
116
102
  }
117
103
  }
118
104
  }
119
105
 
120
106
  .dataTable-body-row-cell-expand-button {
121
- @layer states {
122
- &[aria-expanded='true'] {
123
- @include expanded;
124
- }
107
+ &[aria-expanded='true'] {
108
+ @include expanded;
125
109
  }
126
110
  }
package/src/components/dataTableSticked/index.scss CHANGED
@@ -3,49 +3,41 @@
3
3
  @use 'exports' as *;
4
4
 
5
5
  .dataTableWrapper {
6
- @layer components {
7
- @include vars;
8
- }
6
+ @include vars;
9
7
 
10
- @layer mods {
11
- &:has(.dataTable.mod-stickyHeader) {
12
- @include stickyHeader;
13
- }
8
+ &:has(.dataTable.mod-stickyHeader) {
9
+ @include stickyHeader;
10
+ }
14
11
 
15
- &:has(.dataTable.mod-columnsOverflow) {
16
- @include columnsOverflow;
17
- }
12
+ &:has(.dataTable.mod-columnsOverflow) {
13
+ @include columnsOverflow;
14
+ }
18
15
 
19
- &:has(.dataTable.mod-rowsOverflow) {
20
- @include rowsOverflow;
21
- }
16
+ &:has(.dataTable.is-firstColumnVisible) {
17
+ @include firstColumnVisible;
22
18
  }
23
19
 
24
- @layer states {
25
- &:has(.dataTable.is-firstColumnVisible) {
26
- @include firstColumnVisible;
27
- }
20
+ &:has(.dataTable.is-lastColumnVisible) {
21
+ @include lastColumnVisible;
22
+ }
28
23
 
29
- &:has(.dataTable.is-lastColumnVisible) {
30
- @include lastColumnVisible;
31
- }
24
+ &:has(.dataTable.mod-rowsOverflow) {
25
+ @include rowsOverflow;
26
+ }
32
27
 
33
- &:has(.dataTable.is-firstRowVisible) {
34
- @include firstRowVisible;
35
- }
28
+ &:has(.dataTable.is-firstRowVisible) {
29
+ @include firstRowVisible;
30
+ }
36
31
 
37
- &:has(.dataTable.is-lastRowVisible) {
38
- @include lastRowVisible;
39
- }
32
+ &:has(.dataTable.is-lastRowVisible) {
33
+ @include lastRowVisible;
40
34
  }
41
35
 
42
- @layer mods {
43
- &:has(:is(.dataTable-head-row-cell, .dataTable-head-body-cell, .dataTable-foot-row-cell).mod-stickyColumn) {
44
- @include stickyColumn;
36
+ &:has(:is(.dataTable-head-row-cell, .dataTable-head-body-cell, .dataTable-foot-row-cell).mod-stickyColumn) {
37
+ @include stickyColumn;
45
38
 
46
- &:has(.dataTable.mod-cellBorder) {
47
- @include stickyColumnBorder;
48
- }
39
+ &:has(.dataTable.mod-cellBorder) {
40
+ @include stickyColumnBorder;
49
41
  }
50
42
  }
51
43
  }
package/src/components/dateField/index.scss CHANGED
@@ -1,39 +1,35 @@
1
1
  @use 'exports' as *;
2
2
 
3
3
  .dateField {
4
- @layer components {
5
- @include vars;
6
- @include component;
7
- }
4
+ @include vars;
5
+ @include component;
8
6
 
9
- @layer mods {
10
- &.mod-filterPill {
11
- @include filterPill;
12
- }
7
+ &.mod-filterPill {
8
+ @include filterPill;
9
+ }
13
10
 
14
- &:not(.mod-auto, .mod-filterPill) {
15
- &.mod-day {
16
- @include day;
11
+ &:not(.mod-auto, .mod-filterPill) {
12
+ &.mod-day {
13
+ @include day;
17
14
 
18
- .form-field.mod-S & {
19
- @include dayS;
20
- }
15
+ .form-field.mod-S & {
16
+ @include dayS;
21
17
  }
18
+ }
22
19
 
23
- &.mod-month {
24
- @include month;
20
+ &.mod-month {
21
+ @include month;
25
22
 
26
- .form-field.mod-S & {
27
- @include monthS;
28
- }
23
+ .form-field.mod-S & {
24
+ @include monthS;
29
25
  }
26
+ }
30
27
 
31
- &.mod-year {
32
- @include year;
28
+ &.mod-year {
29
+ @include year;
33
30
 
34
- .form-field.mod-S & {
35
- @include yearS;
36
- }
31
+ .form-field.mod-S & {
32
+ @include yearS;
37
33
  }
38
34
  }
39
35
  }
package/src/components/dateRangeField/index.scss CHANGED
@@ -2,47 +2,43 @@
2
2
  @use 'exports' as *;
3
3
 
4
4
  .dateRangeField {
5
- @layer components {
6
- @include vars;
7
- @include component;
8
- }
5
+ @include vars;
6
+ @include component;
9
7
 
10
- @layer mods {
11
- .form-field.mod-S & {
12
- @include S;
13
- }
8
+ .form-field.mod-S & {
9
+ @include S;
10
+ }
14
11
 
15
- &.mod-filterPill {
16
- @include filterPill;
12
+ &.mod-filterPill {
13
+ @include filterPill;
17
14
 
18
- @include media.max('XS') {
19
- @include filterPillCompact;
20
- }
15
+ @include media.max('XS') {
16
+ @include filterPillCompact;
21
17
  }
18
+ }
22
19
 
23
- &:not(.mod-auto, .mod-filterPill) {
24
- &.mod-day {
25
- @include day;
20
+ &:not(.mod-auto, .mod-filterPill) {
21
+ &.mod-day {
22
+ @include day;
26
23
 
27
- .form-field.mod-S & {
28
- @include dayS;
29
- }
24
+ .form-field.mod-S & {
25
+ @include dayS;
30
26
  }
27
+ }
31
28
 
32
- &.mod-month {
33
- @include month;
29
+ &.mod-month {
30
+ @include month;
34
31
 
35
- .form-field.mod-S & {
36
- @include monthS;
37
- }
32
+ .form-field.mod-S & {
33
+ @include monthS;
38
34
  }
35
+ }
39
36
 
40
- &.mod-year {
41
- @include year;
37
+ &.mod-year {
38
+ @include year;
42
39
 
43
- .form-field.mod-S & {
44
- @include yearS;
45
- }
40
+ .form-field.mod-S & {
41
+ @include yearS;
46
42
  }
47
43
  }
48
44
  }