@lucca-front/scss 8.2.2 → 9.0.0-alpha.1

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

@@ -1,58 +0,0 @@
-@import "../field/field";
-
-@include field("radiosfield");
-
-.radiosfield {
-	border: 0;
-	padding: 0;
-	margin: 0;
-}
-
-.radiosfield-input {
-	@include field-input("radiosfield");
-
-	&.mod-row {
-		@extend %radiosfield-row;
-	}
-
-	&.button-group {
-		display: flex;
-	}
-}
-
-.form.mod-compact .radiosfield, .radiosfield.mod-compact {
-	@include field-compact("radiosfield");
-
-	align-items: flex-start;
-
-	.radiosfield-input {
-		@extend %radiosfield-row;
-	}
-}
-
-.form.mod-framed .radiosfield, .radiosfield.mod-framed {
-	display: block;
-
-	.radiosfield-input {
-		@extend %radiosfield-row;
-	}
-
-	fieldset {
-		border: none;
-		padding: 0;
-	}
-}
-
-%radiosfield-row {
-	display: flex;
-	flex-wrap: wrap;
-
-	.radio {
-		margin-top: 0;
-		margin-bottom: 0;
-	}
-
-	.radio {
-		margin-right: _component("field.horizontal-spacing");
-	}
-}

package/src/components/inputs/radio-buttons/_radio-buttons.scss

@@ -1,106 +0,0 @@
-.radioButtons {
-	display: flex;
-}
-
-.radioButtons-item {
-	margin-left: -1px;
-
-	&:first-child {
-		margin-left: 0;
-
-		.radioButtons-item-label {
-			border-radius: _theme("commons.border.radius") 0 0 _theme("commons.border.radius");
-		}
-	}
-
-	&:last-child {
-		.radioButtons-item-label {
-			border-radius: 0 _theme("commons.border.radius") _theme("commons.border.radius") 0;
-		}
-	}
-}
-
-.radioButtons-item-input {
-	@include mask;
-
-	&:checked ~ .radioButtons-item-label,
-	&:focus ~ .radioButtons-item-label {
-		z-index: 2;
-	}
-}
-
-.radioButtons-item-label {
-	background-color: _color("white");
-	cursor: pointer;
-	display: block;
-	overflow: hidden;
-	padding: _component("radioButtons.padding");
-	position: relative;
-	transition: all _theme("commons.animations.durations.fast") ease;
-}
-
-.radioButtons-item-label {
-	color: _component("radioButtons.default-palette.700");
-	box-shadow: inset 0 0 0 1px _component("radioButtons.default-palette.200");
-}
-
-.radioButtons-item-input:not(:disabled, .is-disabled) {
-	~ .radioButtons-item-label {
-		&:hover {
-			background-color: _component("radioButtons.default-palette.50");
-			box-shadow: _theme('commons.elevations.elevation-1'), inset 0 0 0 1px _component("radioButtons.default-palette.200");
-		}
-	}
-
-	&:checked ~ .radioButtons-item-label {
-		background-color: _component("radioButtons.default-palette.50");
-		box-shadow: inset 0 0 0 1px _component("radioButtons.default-palette.400");
-		color: _component("radioButtons.default-palette.700");
-
-		&:hover {
-			box-shadow: _theme('commons.elevations.elevation-1'), inset 0 0 0 1px _component("radioButtons.default-palette.400");
-		}
-	}
-
-	&:focus ~ .radioButtons-item-label {
-		box-shadow: 0 0 0 4px _component("radioButtons.hover-palette.200"), inset 0 0 0 1px _component("radioButtons.hover-palette.400");
-	}
-
-	&:focus:checked ~ .radioButtons-item-label {
-		background-color: _component("radioButtons.default-palette.100");
-		box-shadow: 0 0 0 4px _component("radioButtons.hover-palette.200"), inset 0 0 0 1px _component("radioButtons.hover-palette.500");
-	}
-
-	&:focus:not(:checked) ~ .radioButtons-item-label {
-		background-color: _color("grey", 50);
-	}
-}
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-.radioButtons {
-	&.mod-small {
-		.radioButtons-item-label {
-			font-size: _component("radioButtons.small.font-size");
-			line-height: _component("radioButtons.small.line-height");
-			padding: _component("radioButtons.small.padding");
-		}
-	}
-}
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-.radioButtons-item-input {
-
-	&:disabled ~ .radioButtons-item-label,
-	&.is-disabled ~ .radioButtons-item-label { // legacy
-		box-shadow: inset 0 0 0 1px _color("grey", 200);
-		color: _color("grey", 500);
-		cursor: default;
-	}
-
-	&:checked:disabled ~ .radioButtons-item-label,
-	&:checked.is-disabled ~ .radioButtons-item-label { // legacy
-		background-color: _color("grey", 100);
-	}
-}

package/src/components/inputs/switch/_switch.scss

@@ -1,197 +0,0 @@
-.switch {
-	display: block;
-	position: relative;
-}
-
-.switch-input {
-	opacity: 0;
-	pointer-events: none;
-	position: absolute;
-}
-
-.switch-label {
-	color: _color("grey", "800");
-	cursor: pointer;
-	display: inline-block;
-	line-height: 1.5rem;
-	padding: 0 0 0 calc(2rem - 4px + #{_theme("spacings.smaller", true)});
-	transition: color _theme("commons.animations.durations.fast") ease;
-
-	&::before {
-		@include makeIcon("cross");
-
-		align-items: center;
-		background-color: _color("grey", "500");
-		border-radius: .5rem;
-		color: _color("white");
-		display: flex;
-		font-size: _theme("sizes.smaller.font-size");
-		height: 1rem;
-		left: 0;
-		line-height: _theme("sizes.small.line-height");
-		margin-top: _component("switch.top");
-		padding-left: _component("switch.icon-right");
-		padding-top: _component("switch.icon-top");
-		position: absolute;
-		top: _theme("spacings.smallest");
-		transition: all _theme("commons.animations.durations.fast") ease;
-		width: calc(2rem - 4px);
-	}
-
-	&::after {
-		background-color: white;
-		box-shadow: _theme("commons.box-shadow.hard");
-		border-radius: 50%;
-		content: "";
-		display: block;
-		height: calc(1rem - 4px);
-		left: 2px;
-		margin-top: _component("switch.top");
-		position: absolute;
-		top: calc(#{_theme("spacings.smallest", true)} + 2px);
-		transition: all _theme("commons.animations.durations.fast") ease;
-		width: calc(1rem - 4px);
-	}
-
-	&:hover {
-		&::before {
-			background-color: _color("grey", "400");
-		}
-	}
-}
-
-
-// MODS
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.switch {
-	&.mod-inline {
-		display: inline-block;
-		margin-right: 1.5rem;
-	}
-
-	&.mod-small {
-		.switch-label {
-			font-size: _theme("sizes.small.font-size");
-			line-height: _theme("sizes.small.line-height");
-			padding: 0 0 0 calc(1.75rem - 4px + #{_theme("spacings.smaller", true)});
-
-			&::before {
-				margin-top: _component("switch.small-top");
-				height: _theme("sizes.small.font-size");
-				padding-left: _component("switch.small-icon-right");
-				width: calc(1.75rem - 4px);
-			}
-			&::after {
-				margin-top: _component("switch.small-top");
-				height: calc(#{_theme("sizes.small.font-size")} - 4px);
-				width: calc(#{_theme("sizes.small.font-size")} - 4px);
-			}
-		}
-		.switch-input:checked ~ .switch-label {
-			&::before {
-				padding-left: _component("switch.small-icon-left");
-			}
-
-			&::after {
-				left: calc(#{_theme("sizes.small.font-size")} - 2px);
-			}
-		}
-	}
-}
-
-
-// STATES
-// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-.switch .switch-input {
-
-	/*
-		Checked
-	*/
-
-	&:checked {
-		~ .switch-label {
-			&::before {
-				@include makeIcon("tick");
-				display: flex;
-				background-color: _component("switch.default-palette.700");
-				padding-left: _component("switch.icon-left");
-			}
-
-			&::after {
-				left: calc(1rem - 2px);
-			}
-		}
-
-		&:hover ~ .switch-label {
-			&::before {
-				background-color: _component("switch.default-palette.600");
-			}
-		}
-
-		&:focus ~ .switch-label {
-			&::before {
-				background-color: _component("switch.default-palette.600");
-				box-shadow: 0 0 0 4px _component("switch.default-palette.200");
-			}
-		}
-
-		&:active:not([disabled], [readonly]) ~ .switch-label {
-			&::before {
-				background-color: _component("switch.default-palette.800");
-				box-shadow: 0 0 0 4px _component("switch.default-palette.300");
-			}
-		}
-	}
-
-	/*
-		Disabled
-	*/
-
-	&[disabled], &[readonly] {
-		~ .switch-label {
-			color: _color("grey", "500");
-			cursor: default;
-
-			&::before {
-				background-color: _color("grey", "200");
-				color: _color("grey", "500");
-			}
-
-			&::after {
-				background-color: _color("grey", "500");
-				box-shadow: none;
-			}
-		}
-
-		&:checked {
-			~ .switch-label {
-				&::before {
-					background-color: _color("grey", "200");
-				}
-			}
-		}
-	}
-
-	/*
-		Focus
-	*/
-
-	&:focus ~ .switch-label {
-		&::before {
-			box-shadow: 0 0 0 4px _color("grey", "200");
-		}
-	}
-
-	/*
-		Active
-	*/
-
-	&:active:not([disabled], [readonly]) ~ .switch-label {
-		&::before {
-			background-color: _color("grey", "600");
-			box-shadow: 0 0 0 4px _color("grey", "300");
-		}
-	}
-}

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

@@ -1,30 +0,0 @@
-%input_compact {
-
-	.textfield-options {
-		right: 0;
-		left: auto;
-		width: calc(100% - #{_component("textfield.compact.label.right-margin")} - #{_component("textfield.compact.label.sizes.default")});
-	}
-
-	.textfield-suffix {
-		top: _component("textfield.compact.padding");
-		right: _component("textfield.compact.padding");
-	}
-
-	// MODS
-	// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-	&.mod-multiline {
-		align-items: flex-start;
-	}
-
-	/* Label Width */
-
-	@each $input-size-name, $input-width in _getMap("components.textfield.sizes") {
-		&.mod-#{$input-size-name} {
-			.textfield-options {
-				width: $input-width;
-			}
-		}
-	}
-}

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

@@ -1,101 +0,0 @@
-%input_framed {
-	width: 100%;
-	margin-bottom: 0 !important;
-
-	&.is-error {
-		@include fieldFramedState("error");
-	}
-
-	&.is-warning {
-		@include fieldFramedState("warning");
-	}
-
-	&.is-valid, &.is-success {
-		@include fieldFramedState("success");
-	}
-
-	&.mod-multiline {
-		.textfield-input {
-			height: _component("field.framed.textarea.height");
-			min-height: _component("field.framed.textarea.min-height");
-			max-height: _component("field.framed.textarea.max-height");
-		}
-
-		&.mod-small {
-			.textfield-input {
-				height: auto;
-			}
-		}
-	}
-
-	&.mod-search, &.mod-autocomplete, &.mod-select {
-		&::after {
-			bottom: 0;
-			right: 0;
-			padding: _component("field.framed.side-padding");
-			z-index: 4;
-		}
-
-		.textfield {
-			width: 100%;
-		}
-
-		.textfield-input {
-			padding-right: _component("field.framed.suffix.padding-right");
-		}
-	}
-
-	.textfield-options {
-		margin-top: -2px;
-		width: auto;
-		right: 1px;
-
-		mark {
-			background-color: transparent;
-			text-decoration: underline;
-			color: inherit;
-		}
-	}
-
-	.textfield-input {
-		width: 100%;
-		border-radius: 0;
-		box-shadow: fakeborderoverlay(_component("field.framed.border"));
-		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) {
-			background-color: _color("white");
-
-			&:hover,
-			&:focus {
-				position: relative;
-				z-index: 1;
-				background-color: _color("white");
-				box-shadow: fakeborderoverlay(_component("field.framed.color"));
-			}
-
-			&:focus {
-				z-index: 4;
-				box-shadow: fakeborderoverlay(_component("field.framed.color")), 0 0 0 4px _component("field.framed.color50");
-			}
-
-		}
-
-		&:invalid {
-			~ .textfield-label {
-				color: _color("primary");
-			}
-		}
-	}
-
-	.textfield-label {
-		position: absolute;
-		left: 0;
-		top: 0;
-		padding: _component("field.framed.label-top-offset") _component("field.framed.side-padding");
-		z-index: 10;
-		line-height: 1.5rem;
-		pointer-events: none;
-	}
-}

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

@@ -1,195 +0,0 @@
-%input_material {
-	padding-top: _component("textfield.material.padding-top");
-
-	.textfield-input {
-		background-color: transparent;
-		border-radius: 0;
-		box-shadow: 0 1px 0 0 _component("textfield.material.border.color");
-		padding: {
-			left: 0;
-			right: 0;
-		}
-
-		&::placeholder {
-			opacity: 0;
-		}
-
-		&:focus, &.is-focused {
-			&::placeholder {
-				opacity: 1;
-			}
-
-			~ .textfield-label {
-				font-size: _theme("sizes.small.font-size");
-				top: 0;
-			}
-		}
-	}
-
-	.textfield-label {
-		color: _component("textfield.material.label.color");
-		font-size: _component("textfield.material.label.font-size");
-		font-weight: 400;
-		left: 0;
-		line-height: 1.5rem;
-		pointer-events: none;
-		position: absolute;
-		top: 1.5rem;
-		width: 100%;
-	}
-
-	.textfield-suffix {
-		position: absolute;
-		right: 0;
-		top: calc(#{_component("textfield.material.padding-top")} + #{_component("textfield.input.padding-vertical")});
-	}
-
-
-	// PALETTE
-	// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-	// Coloring
-
-	@mixin inputColoring($palette) {
-		.textfield-input {
-			&:focus, &.is-focused {
-				~ .textfield-label {
-					color: _color($palette);
-				}
-			}
-		}
-
-		// Needed when textfield label is not next to the textfield-input
-		&.is-focused {
-			.textfield-label {
-				color: _color($palette);
-			}
-		}
-	}
-
-	// default color
-	@include inputColoring("textfield.material.default-palette");
-
-	// palette colors
-	@each $name, $palette in _getMap("palettes") {
-		&.palette-#{$name} {
-			@include inputColoring($name);
-		}
-	}
-
-
-	// MOD
-	// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-	&.mod-small {
-		.textfield-label {
-			line-height: _theme("sizes.small.line-height");
-			font-size: _theme("sizes.small.font-size");
-		}
-	}
-
-
-	&.mod-withSuffix {
-		.textfield-input {
-			padding-right: _component("textfield.material.suffix.padding-right");
-		}
-	}
-
-	&.mod-noLabel {
-		padding-top: 0;
-
-		.textfield-input::placeholder {
-			opacity: 1;
-		}
-
-		.textfield-label {
-			display: none;
-		}
-
-		.textfield-suffix {
-			top: _component("textfield.input.padding-vertical");
-		}
-	}
-
-	&.mod-search, &.mod-autocomplete {
-		&::after {
-			color: _color("text.light");
-			bottom: .5rem;
-			right: 0;
-		}
-
-		.textfield-input {
-			padding-right: 1.75rem;
-		}
-
-		.textfield-label {
-			padding-right: 0;
-		}
-	}
-
-	&.mod-radio {
-		padding-top: 0;
-	}
-
-	// STATES
-	// ▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒
-
-	// Inline validation
-	&.is-loading {
-
-		&::before, &::after {
-			bottom: .4rem !important;
-			right: 0 !important;
-		}
-	}
-
-	&.is-valid {
-		&::before {
-			bottom: .7rem !important;
-			right: 0 !important;
-		}
-
-		.textfield-label {
-			padding-right: 1.5rem;
-		}
-
-		.textfield-input {
-			padding-right: 1.5rem;
-		}
-	}
-
-	.textfield-input {
-		&.is-filled {
-			@include fieldMaterialFilled("textfield");
-		}
-
-		&[disabled], &[readonly], &.is-disabled, &.is-readonly {
-			background-color: transparent;
-			background-image: linear-gradient(to right, _component("textfield.material.border.color") 33%, rgba(255, 255, 255, 0) 0%); // Dashed line
-			background-position: bottom;
-			background-repeat: repeat-x;
-			background-size: 3px 1px;
-			box-shadow: none;
-		}
-
-		&.is-invalid, &.is-error {
-			@include fieldMaterialState("textfield", "error");
-		}
-
-		&.is-warning {
-			@include fieldMaterialState("textfield", "warning");
-		}
-
-		&.is-success {
-			@include fieldMaterialState("textfield", "success");
-		}
-	}
-
-	// Needed when textfield label is not next to the textfield-input
-	&.is-focused {
-		.textfield-label {
-			font-size: _theme("sizes.small.font-size");
-			top: 0;
-		}
-	}
-}