@lucca-front/scss 7.3.0-rc.1 → 7.4.0-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lucca-front/scss",
-  "version": "7.3.0-rc.1",
+  "version": "7.4.0-rc.1",
   "description": "a scss-framework based on trello's css naming",
   "main": "src/main.scss",
   "scripts": {},

package/src/components/_breadcrumbs.scss

@@ -1,7 +1,3 @@
-.breadcrumbs {
-	margin-bottom: _theme("spacings.smaller");
-}
-
 .breadcrumbs-list {
 	display: flex;
 	flex-wrap: wrap;
@@ -11,8 +7,10 @@
 }
 
 .breadcrumbs-list-item {
-	display: flex;
 	align-items: center;
+	display: flex;
+	font-size: _theme("sizes.small.font-size");
+	line-height: _theme("sizes.small.line-height");
 
 	&:not(:first-child) {
 		&::before {
@@ -60,8 +58,6 @@
 // ▒▒▒▒
 
 .breadcrumbs.mod-compact {
-	margin-bottom: 0;
-
 	.breadcrumbs-list-item {
 		// two items
 		&:nth-last-child(2):first-child,

package/src/components/_button.scss

@@ -209,7 +209,6 @@
 
 		&::before {
 			@include makeIcon("arrow_south");
-			content: "";
 			height: 0;
 			vertical-align: text-top;
 		}

package/src/components/_form.scss

@@ -140,7 +140,7 @@
 		clear: both;
 	}
 
-	&:not(.is-disabled, :disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid, .ng-invalid) {
+	&:not(.is-disabled, :disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
 		&:hover,
 		&:focus {
 			position: relative;

package/src/components/_menu.scss

@@ -25,6 +25,10 @@
 	flex-wrap: wrap;
 }
 
+.menu-link { // legacy syntax
+	margin-right: 2.5rem; // magic number
+}
+
 .menu-link, // legacy syntax
 .menu-list-item-action {
 	border-radius: _theme("commons.border.radius");

package/src/components/_nav-side.scss

@@ -108,9 +108,15 @@
 .navSide-item-link {
 	font-size: _component("navSide.main-font-size");
 	font-weight: 600;
-	line-height: 1em;
-	padding: 1em;
+	line-height: 1rem;
+	padding: _theme("spacings.small");
+	width: 100%;
+	text-align: left;
+	border: 0;
+	background-color: transparent;
+	cursor: pointer;
 
+	&:focus-visible,
 	&:hover {
 		background-color: _component("navSide.fullwidth-palette.hovered-bg");
 		color: _component("navSide.fullwidth-palette.hovered-text");
@@ -374,7 +380,7 @@
 				flex-direction: row;
 
 				.navSide-item-link-title {
-					display: none;
+					@include mask;
 				}
 				&:hover {
 					background-color: _component("navSide.bottom-section-palette.hovered-bg");

package/src/components/inputs/checkbox/_checkboxesfield.scss

@@ -25,12 +25,16 @@
 }
 
 .form.mod-framed .checkboxesfield, .checkboxesfield.mod-framed {
-	@include field-framed("checkboxesfield");
 	display: block;
 
 	.checkboxesfield-input {
 		@extend %checkboxesfield-row;
 	}
+
+	fieldset {
+		border: none;
+		padding: 0;
+	}
 }
 
 %checkboxesfield-row {

package/src/components/inputs/field/_field.framed.scss

@@ -35,7 +35,7 @@
 	}
 
 	.#{$fieldname}-input {
-		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid, .ng-invalid) {
+		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
 			background-color: _color("white");
 
 			&:focus, &:hover {

package/src/components/inputs/radio/_radiosfield.scss

@@ -31,13 +31,16 @@
 }
 
 .form.mod-framed .radiosfield, .radiosfield.mod-framed {
-	@include field-framed("radiosfield");
-
 	display: block;
 
 	.radiosfield-input {
 		@extend %radiosfield-row;
 	}
+
+	fieldset {
+		border: none;
+		padding: 0;
+	}
 }
 
 %radiosfield-row {

package/src/components/inputs/textfield/_textfield.framed.scss

@@ -64,7 +64,7 @@
 		padding: _component("field.framed.top-padding") _component("field.framed.side-padding") _component("field.framed.bottom-padding");
 		line-height: _theme("sizes.standard.line-height");
 
-		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid, .ng-invalid) {
+		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
 			background-color: _color("white");
 
 			&:hover,

package/src/components/inputs/textfield/_textfield.outlined.scss

@@ -17,7 +17,7 @@
 		.textfield-input:focus {
 			&:not([disabled], &[readonly], &.is-disabled, &.is-readonly) {
 				background-color: _color("white");
-				box-shadow: 0 0 0 4px _color($palette, textfield-input200), inset 0 0 0 _component("textfield.outlined.border.width") _color($palette, 600);
+				box-shadow: 0 0 0 4px _color($palette, 200), inset 0 0 0 _component("textfield.outlined.border.width") _color($palette, 600);
 			}
 		}
 	}

package/src/utilities/_flex.scss

@@ -162,3 +162,19 @@ $suffix: "!important" !default;
 .#{$prefix}minWidth0 {
 	min-width: 0 #{$suffix};
 }
+
+// gap
+
+@each $name, $value in $spacings {
+	.#{$prefix}gap#{str-capitalize($name)} {
+		gap: _theme("spacings." + $name) #{$suffix};
+	}
+
+	.#{$prefix}columnGap#{str-capitalize($name)} {
+		column-gap: _theme("spacings." + $name) #{$suffix};
+	}
+
+	.#{$prefix}rowGap#{str-capitalize($name)} {
+		row-gap: _theme("spacings." + $name) #{$suffix};
+	}
+}

package/src/utilities/_text.scss

@@ -62,6 +62,18 @@ $suffix: "!important";
 	color: _color("text.placeholder") #{$suffix};
 }
 
+.u-textGrey900 {
+	color: _color("grey", "900");
+}
+
+.u-textGrey700 {
+	color: _color("grey", "700");
+}
+
+.u-textGrey600 {
+	color: _color("grey", "600");
+}
+
 // palette
 @each $name, $palette in _getMap("palettes") {
 	.u-text#{str-capitalize($name)} {