@lucca-front/scss 7.3.0-rc.2 → 7.4.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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lucca-front/scss",
3
- "version": "7.3.0-rc.2",
3
+ "version": "7.4.0",
4
4
  "description": "a scss-framework based on trello's css naming",
5
5
  "main": "src/main.scss",
6
6
  "scripts": {},
@@ -1,7 +1,3 @@
1
- .breadcrumbs {
2
- margin-bottom: _theme("spacings.smaller");
3
- }
4
-
5
1
  .breadcrumbs-list {
6
2
  display: flex;
7
3
  flex-wrap: wrap;
@@ -11,8 +7,10 @@
11
7
  }
12
8
 
13
9
  .breadcrumbs-list-item {
14
- display: flex;
15
10
  align-items: center;
11
+ display: flex;
12
+ font-size: _theme("sizes.small.font-size");
13
+ line-height: _theme("sizes.small.line-height");
16
14
 
17
15
  &:not(:first-child) {
18
16
  &::before {
@@ -60,8 +58,6 @@
60
58
  // ▒▒▒▒
61
59
 
62
60
  .breadcrumbs.mod-compact {
63
- margin-bottom: 0;
64
-
65
61
  .breadcrumbs-list-item {
66
62
  // two items
67
63
  &:nth-last-child(2):first-child,
@@ -209,7 +209,6 @@
209
209
 
210
210
  &::before {
211
211
  @include makeIcon("arrow_south");
212
- content: "";
213
212
  height: 0;
214
213
  vertical-align: text-top;
215
214
  }
@@ -25,6 +25,10 @@
25
25
  flex-wrap: wrap;
26
26
  }
27
27
 
28
+ .menu-link { // legacy syntax
29
+ margin-right: 2.5rem; // magic number
30
+ }
31
+
28
32
  .menu-link, // legacy syntax
29
33
  .menu-list-item-action {
30
34
  border-radius: _theme("commons.border.radius");
@@ -108,9 +108,15 @@
108
108
  .navSide-item-link {
109
109
  font-size: _component("navSide.main-font-size");
110
110
  font-weight: 600;
111
- line-height: 1em;
112
- padding: 1em;
111
+ line-height: 1rem;
112
+ padding: _theme("spacings.small");
113
+ width: 100%;
114
+ text-align: left;
115
+ border: 0;
116
+ background-color: transparent;
117
+ cursor: pointer;
113
118
 
119
+ &:focus-visible,
114
120
  &:hover {
115
121
  background-color: _component("navSide.fullwidth-palette.hovered-bg");
116
122
  color: _component("navSide.fullwidth-palette.hovered-text");
@@ -374,7 +380,7 @@
374
380
  flex-direction: row;
375
381
 
376
382
  .navSide-item-link-title {
377
- display: none;
383
+ @include mask;
378
384
  }
379
385
  &:hover {
380
386
  background-color: _component("navSide.bottom-section-palette.hovered-bg");
@@ -25,12 +25,16 @@
25
25
  }
26
26
 
27
27
  .form.mod-framed .checkboxesfield, .checkboxesfield.mod-framed {
28
- @include field-framed("checkboxesfield");
29
28
  display: block;
30
29
 
31
30
  .checkboxesfield-input {
32
31
  @extend %checkboxesfield-row;
33
32
  }
33
+
34
+ fieldset {
35
+ border: none;
36
+ padding: 0;
37
+ }
34
38
  }
35
39
 
36
40
  %checkboxesfield-row {
@@ -31,13 +31,16 @@
31
31
  }
32
32
 
33
33
  .form.mod-framed .radiosfield, .radiosfield.mod-framed {
34
- @include field-framed("radiosfield");
35
-
36
34
  display: block;
37
35
 
38
36
  .radiosfield-input {
39
37
  @extend %radiosfield-row;
40
38
  }
39
+
40
+ fieldset {
41
+ border: none;
42
+ padding: 0;
43
+ }
41
44
  }
42
45
 
43
46
  %radiosfield-row {
@@ -162,3 +162,19 @@ $suffix: "!important" !default;
162
162
  .#{$prefix}minWidth0 {
163
163
  min-width: 0 #{$suffix};
164
164
  }
165
+
166
+ // gap
167
+
168
+ @each $name, $value in $spacings {
169
+ .#{$prefix}gap#{str-capitalize($name)} {
170
+ gap: _theme("spacings." + $name) #{$suffix};
171
+ }
172
+
173
+ .#{$prefix}columnGap#{str-capitalize($name)} {
174
+ column-gap: _theme("spacings." + $name) #{$suffix};
175
+ }
176
+
177
+ .#{$prefix}rowGap#{str-capitalize($name)} {
178
+ row-gap: _theme("spacings." + $name) #{$suffix};
179
+ }
180
+ }
@@ -62,6 +62,18 @@ $suffix: "!important";
62
62
  color: _color("text.placeholder") #{$suffix};
63
63
  }
64
64
 
65
+ .u-textGrey900 {
66
+ color: _color("grey", "900");
67
+ }
68
+
69
+ .u-textGrey700 {
70
+ color: _color("grey", "700");
71
+ }
72
+
73
+ .u-textGrey600 {
74
+ color: _color("grey", "600");
75
+ }
76
+
65
77
  // palette
66
78
  @each $name, $palette in _getMap("palettes") {
67
79
  .u-text#{str-capitalize($name)} {