@lucca-front/scss 7.2.0 → 7.3.0

package/package.json

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

package/src/components/_button.scss

@@ -5,29 +5,24 @@
 	background-color: _color($palette);
 	color: _color($palette, "text");
 
-	&:hover:not([disabled]) {
-		background-color: _color($palette, "600");
-		box-shadow: _theme('commons.box-shadow.xs');
-	}
+	&:not([disabled], .is-disabled) {
+		&:hover {
+			background-color: _color($palette, "600");
+			box-shadow: _theme('commons.box-shadow.xs');
+		}
 
-	&:focus {
-		box-shadow: _theme('commons.box-shadow.xs'), 0 0 0 4px _color($palette, "200");
-		outline: none;
-		background-color: _color($palette, "600");
-	}
+		&:focus {
+			box-shadow: _theme('commons.box-shadow.xs'), 0 0 0 4px _color($palette, "200");
+			outline: none;
+			background-color: _color($palette, "600");
+		}
 
-	&:active:not([disabled]) {
-		background-color: _color($palette, "800");
-		box-shadow: 0 0 0 4px _color($palette, "300");
+		&:active {
+			background-color: _color($palette, "800");
+			box-shadow: 0 0 0 4px _color($palette, "300");
+		}
 	}
 
-	&[disabled],
-	&.is-disabled {
-		background-color: _color($palette, "500");
-		color: _color($palette, "300");
-		cursor: default;
-		pointer-events: none;
-	}
 
 	.button-counter {
 		background-color: _color($palette, "500");
@@ -35,33 +30,37 @@
 }
 
 @mixin buttonLinkColoring($palette) {
-	&:focus:not([disabled]) {
-		box-shadow: 0 0 0 4px _color($palette, "100"), inset 0 0 0 1px _color($palette, "300");
-		background: _color($palette, "100");
+	&:not([disabled], .is-disabled) {
+		&:focus {
+			box-shadow: 0 0 0 4px _color($palette, "100"), inset 0 0 0 1px _color($palette, "300");
+			background: _color($palette, "100");
+		}
 	}
 }
 
 @mixin buttonOutlineColoring($palette) {
-	box-shadow: inset 0 0 0 1px _color($palette, "400");
-	color: _color($palette);
-
-	&:hover:not([disabled]) {
-		background-color: _color($palette, "100");
+	&:not([disabled], .is-disabled) {
 		color: _color($palette);
-		box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), inset 0 0 0 1px _color($palette, "400");
-	}
+		box-shadow: inset 0 0 0 1px _color($palette, "400");
 
-	&:focus:not([disabled]) {
-		background-color: _color($palette, "100");
-		color: _color($palette);
-		box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), 0 0 0 4px _color($palette, "100"), inset 0 0 0 1px _color($palette, "400");
-		outline: none;
-	}
+		&:hover {
+			background-color: _color($palette, "100");
+			color: _color($palette);
+			box-shadow: _theme('commons.elevations.elevation-1'), inset 0 0 0 1px _color($palette, "400");
+		}
 
-	&:active:not([disabled]) {
-		background-color: _color($palette, "200");
-		color: _color($palette);
-		box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), 0 0 0 4px _color($palette, "200"), inset 0 0 0 1px _color($palette, "500");
+		&:focus {
+			background-color: _color($palette, "100");
+			color: _color($palette);
+			box-shadow: _theme('commons.elevations.elevation-1'), 0 0 0 4px _color($palette, "100"), inset 0 0 0 1px _color($palette, "400");
+			outline: none;
+		}
+
+		&:active {
+			background-color: _color($palette, "200");
+			color: _color($palette);
+			box-shadow: _theme('commons.elevations.elevation-1'), 0 0 0 4px _color($palette, "200"), inset 0 0 0 1px _color($palette, "500");
+		}
 	}
 
 	.button-counter {
@@ -188,17 +187,17 @@
 		}
 
 		&.mod-invert {
-			color: white;
+			color: _color('white');
 
-			&:hover, &:focus {
-				&:not([disabled]) {
+			&:not([disabled], .is-disabled) {
+				&:hover, &:focus {
 					background-color: rgba(255, 255, 255, .1);
-					color: white;
+					color: _color('white');
 				}
-			}
 
-			&:focus {
-				box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
+				&:focus {
+					box-shadow: 0 0 0 4px rgba(0, 0, 0, .1);
+				}
 			}
 		}
 	}
@@ -209,8 +208,8 @@
 		width: 2rem;
 
 		&::before {
-			content: "";
 			@include makeIcon("arrow_south");
+			content: "";
 			height: 0;
 			vertical-align: text-top;
 		}
@@ -220,37 +219,41 @@
 		}
 	}
 
-	&.mod-outline,
-	&.mod-outlined {
+	&.mod-outlined,
+	&.mod-outline { // legacy
 		background-color: _color("white");
 		box-shadow: inset 0 0 0 1px _color("grey", "400");
 		color: _color("text.default");
 
-		&:hover:not([disabled]) {
-			background-color: _color("grey", "100");
-			color: _color("text.default");
-			box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), inset 0 0 0 1px _color("grey", "400");
-		}
-	
-		&:focus:not([disabled]) {
-			background-color: _color("grey", "100");
-			color: _color("text.default");
-			box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), 0 0 0 4px _color("primary", "100"), inset 0 0 0 1px _color("primary", "400");
-			outline: none;
-		}
-	
-		&:active:not([disabled]) {
-			background-color: _color("grey", "200");
-			color: _color("text.default");
-			box-shadow: 0 2px 8px rgba(19, 29, 53, .04), 0 1px 2px rgba(19, 29, 53, .06), 0 0 0 4px _color("primary", "200"), inset 0 0 0 1px _color("primary", "500");
+		&:not([disabled], .is-disabled) {
+			&:hover {
+				background-color: _color("grey", "100");
+				color: _color("text.default");
+				box-shadow: _theme('commons.elevations.elevation-1'), inset 0 0 0 1px _color("grey", "400");
+			}
+
+			&:focus {
+				background-color: _color("grey", "100");
+				color: _color("text.default");
+				box-shadow: _theme('commons.elevations.elevation-1'), 0 0 0 4px _color("primary", "100"), inset 0 0 0 1px _color("primary", "400");
+				outline: none;
+			}
+
+			&:active {
+				background-color: _color("grey", "200");
+				color: _color("text.default");
+				box-shadow: _theme('commons.elevations.elevation-1'), 0 0 0 4px _color("primary", "200"), inset 0 0 0 1px _color("primary", "500");
+			}
 		}
 
+
+
 		// TODO delete this class ?
 		&.mod-white {
 			background-color: _color("white");
 			color: _color("grey", "700");
 		}
-		
+
 		// palette colors
 		@each $name, $palette in _getMap("palettes") {
 			&.palette-#{$name} {
@@ -312,6 +315,26 @@
 // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
 
 .button {
+	/* Disabled */
+
+	&.is-disabled,
+	&[disabled] {
+		outline: none;
+		background-color: _color('grey', 100);
+		color: _color('grey', 500);
+		cursor: default;
+
+		&.mod-outlined,
+		&.mod-outline { // legacy
+			background-color: _color('white');
+			border-color: _color('grey', 200);
+		}
+
+		&.mod-link {
+			color: _color('grey', 500);
+			background-color: transparent;
+		}
+	}
 
 	/* Loading */
 
@@ -385,7 +408,7 @@
 	}
 
 	.button {
-		@include buttonColoring("button.default-palette");
+		// @include buttonColoring("button.default-palette");
 
 		border-radius: 0;
 		display: block;
@@ -393,7 +416,10 @@
 		padding-left: _theme("spacings.small");
 		padding-right: _theme("spacings.small");
 		position: relative;
-		border-right: 1px solid rgba(0, 0, 0, .1);
+
+		&:not(.mod-outline, .mod-outlined) {
+			border-right: _theme('commons.divider.width') solid rgba(0, 0, 0, .1);
+		}
 
 		&:first-child {
 			border-radius: _component("button.border.radius") 0 0 _component("button.border.radius");
@@ -404,13 +430,22 @@
 			border-right: 0;
 		}
 
-		&:hover, &:focus {
-			z-index: 1;
+		&:not(:first-child) {
+			&.mod-outline,
+			&.mod-outlined {
+				margin-left: -1px;
+			}
 		}
 
-		&:focus {
-			background-color: _color("primary", "600");
-			box-shadow: none;
+		&:not([disabled], .is-disabled) {
+			&:hover, &:focus {
+				z-index: 1;
+			}
+
+			&:focus {
+				background-color: _color("primary", "600");
+				box-shadow: none;
+			}
 		}
 	}
 

package/src/components/_form.scss

@@ -124,6 +124,7 @@
 .checkboxesfield.mod-framed,
 .radiosfield.mod-framed,
 .form.mod-framed .fieldsetWrapper {
+	background-color: _color("white");
 	padding: 0;
 	box-shadow: fakeborderoverlay(_component("field.framed.border"));
 	transition: background-color _theme("commons.animations.durations.standard");
@@ -139,14 +140,19 @@
 		clear: both;
 	}
 
-	&:hover {
-		background-color: _component("field.framed.color50");
-	}
+	&:not(.is-disabled, :disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
+		&:hover,
+		&:focus {
+			position: relative;
+			z-index: 1;
+			background-color: _color("white");
+			box-shadow: fakeborderoverlay(_component("field.framed.color"));
+		}
 
-	&:focus-within {
-		position: relative;
-		z-index: 1;
-		box-shadow: fakeborderoverlay(_component("field.framed.color")), 0 0 0 4px _component("field.framed.color50");
+		&:focus {
+			z-index: 4;
+			box-shadow: fakeborderoverlay(_component("field.framed.color")), 0 0 0 4px _component("field.framed.color50");
+		}
 	}
 
 	.radiosfield, .checkboxesfield {
@@ -169,10 +175,6 @@
 
 	&.is-disabled, &.is-readonly {
 		background-color: _theme("commons.disabled.background");
-
-		.radio-label, .checkbox-label {
-			cursor: not-allowed;
-		}
 	}
 
 	&.is-loading {

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

@@ -17,30 +17,31 @@
 	cursor: pointer;
 	display: inline-flex;
 	align-items: flex-start;
-	transition: color _theme("commons.animations.durations.fast") ease;
+	transition: color _theme('commons.animations.durations.fast') ease;
 
 	&::before {
-		@include makeIcon("tick");
-		border-radius: _component("checkbox.input.border-radius");
-		border: 2px solid _component("checkbox.input.border.color");
+		@include makeIcon('tick');
+		background-color: _color("white");
+		border-radius: _component('checkbox.input.border-radius');
+		border: 2px solid _component('checkbox.input.border.color');
 		color: transparent;
 		display: block;
 		flex: 0 0 auto;
-		font-size: .8rem;
-		height: _component("checkbox.input.size");
+		font-size: 0.8rem;
+		height: _component('checkbox.input.size');
 		line-height: 1;
-		margin-right: _component("checkbox.input.margin-right");
-		margin-top: _component("checkbox.input.margin-top");
+		margin-right: _component('checkbox.input.margin-right');
+		margin-top: _component('checkbox.input.margin-top');
 		text-align: center;
-		transition: all _theme("commons.animations.durations.fast") ease;
-		width: _component("checkbox.input.size");
+		transition: all _theme('commons.animations.durations.fast') ease;
+		width: _component('checkbox.input.size');
 	}
 
 	&:hover {
-		color: _color("text.light");
+		color: _color('text.light');
 
 		&::before {
-			border-color: _component("checkbox.input.border.hover");
+			border-color: _component('checkbox.input.border.hover');
 		}
 	}
 }
@@ -61,54 +62,56 @@
 		.checkbox-input:not(:disabled):checked ~ .checkbox-label {
 			&:hover {
 				&::before {
-					background-color: _color($palette, "600");
-					border-color: _color($palette, "600");
+					background-color: _color($palette, '600');
+					border-color: _color($palette, '600');
 				}
 			}
 		}
 
 		.checkbox-input:focus ~ .checkbox-label {
 			&::before {
-				box-shadow: 0 0 0 4px _color($palette, "200");
+				box-shadow: 0 0 0 4px _color($palette, '200');
 			}
 		}
 	}
 
 	// default color
-	@include checkboxColoring("checkbox.default-palette");
+	@include checkboxColoring('checkbox.default-palette');
 
 	// Status and associated palettes
-	&.palette-error, &.is-error {
+	&.palette-error,
+	&.is-error {
 		.checkbox-label {
 			&::before {
-				border-color: _color("error", "600");
+				border-color: _color('error', '600');
 			}
 		}
 	}
-	&.palette-warning, &.is-warning {
+	&.palette-warning,
+	&.is-warning {
 		.checkbox-label {
 			&::before {
-				border-color: _color("warning", "600");
+				border-color: _color('warning', '600');
 			}
 		}
 	}
-	&.palette-success, &.is-success {
+	&.palette-success,
+	&.is-success {
 		.checkbox-label {
 			&::before {
-				border-color: _color("success", "600");
+				border-color: _color('success', '600');
 			}
 		}
 	}
 
 	// palette colors
-	@each $name, $palette in _getMap("palettes") {
+	@each $name, $palette in _getMap('palettes') {
 		&.palette-#{$name} {
 			@include checkboxColoring($name);
 		}
 	}
 }
 
-
 // MODS
 // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
 
@@ -134,14 +137,14 @@
 
 	&.mod-small {
 		.checkbox-label {
-			font-size: _theme("sizes.small.font-size");
-			line-height: _theme("sizes.small.line-height");
+			font-size: _theme('sizes.small.font-size');
+			line-height: _theme('sizes.small.line-height');
 
 			&::before {
-				width: _theme("sizes.small.font-size");
-				height: _theme("sizes.small.font-size");
-				font-size: _theme("sizes.smaller.font-size");
-				margin-top: _component("checkbox.input.small-top");
+				width: _theme('sizes.small.font-size');
+				height: _theme('sizes.small.font-size');
+				font-size: _theme('sizes.smaller.font-size');
+				margin-top: _component('checkbox.input.small-top');
 			}
 		}
 	}
@@ -162,22 +165,23 @@
 // STATES
 // ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
 
-
 .checkbox .checkbox-input {
-	&[disabled] {
+	&[disabled],
+	&[read-only] {
 		~ .checkbox-label {
-			color: _color("grey");
+			color: _color('grey', '500');
 			cursor: default;
 
 			&::before {
-				border: 2px solid _color("grey", "500");
+				border: 2px solid _color('grey', '500');
 			}
 		}
 
 		&:checked ~ .checkbox-label {
 			&::before {
-				background-color: _color("grey", "500");
-				border: 2px solid _color("grey", "500");
+				color: _color('grey', '500');
+				background-color: _color('grey', '200');
+				border: 2px solid _color('grey', '200');
 			}
 		}
 	}
@@ -185,7 +189,7 @@
 	~ .checkbox-mixed ~ .checkbox-label,
 	&.is-incomplete ~ .checkbox-label {
 		&::before {
-			@include makeIcon("partial");
+			@include makeIcon('partial');
 		}
 	}
 }

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

@@ -35,10 +35,14 @@
 	}
 
 	.#{$fieldname}-input {
-		&:not(:disabled) {
+		&:not(:disabled, .is-error, .is-success, .is-valid, .is-warning, .is-invalid) {
+			background-color: _color("white");
+
 			&:focus, &:hover {
 				position: relative;
 				z-index: 1;
+				background-color: _color("white");
+				box-shadow: fakeborderoverlay(_component("field.framed.color"));
 
 				~ .#{$fieldname}-messages {
 					transform: translateY(100%);
@@ -47,6 +51,7 @@
 
 			&:focus {
 				z-index: 4;
+				box-shadow: fakeborderoverlay(_component("field.framed.color")), 0 0 0 4px _component("field.framed.color50");
 			}
 		}
 	}