@imposium-hub/components 2.16.0-0 → 3.0.0-0

package/less/components/form-field.less

@@ -1,157 +1,147 @@
-@labelWidth: 100px;
-@inputHeight: 20px;
-@labelHeight: 20px;
-@fieldMargin: 4px;
-@labelPadding: 4px;
-@inputPadding: 30px;
-
-.inputMixin {
+
+@labelWidth:100px;
+@inputHeight:20px;
+@labelHeight:20px;
+@fieldMargin:4px;
+@labelPadding:5px;
+@inputPadding:30px;
+
+.inputMixin{
 	display: inline-block;
-	background: @inputBackground;
-	border: none;
-	color: @textDefault;
-	font-size: @fontSizeSmall;
-	box-sizing: border-box;
+	background:@inputBackground;
+	border:none;
+	color:@textDefault;
+	font-size:@fontSizeSmall;
+	box-sizing:border-box;
 	vertical-align: top;
-	height: @inputHeight;
-	width: 100%;
+	height:@inputHeight;
+	width:100%;
 	font-family: 'Roboto Condensed', sans-serif;
 	border-radius: 0;
-	appearance: none;
-
-	&:hover {
-		background: darken(@inputBackground, 3%);
+	appearance:none;
+	
+	&:hover{
+		background:darken(@inputBackground, 3%);
 	}
 
-	&:focus {
-		background: darken(@inputBackground, 3%);
+	&:focus{
+		background:darken(@inputBackground, 3%);	
 	}
 
-	&:disabled {
-
-		color: fadeout(@textDefault, 60%);
-		background: @inputBackground;
+	&:disabled{
+		
+		color:fadeout(@textDefault, 60%);
+		background:@inputBackground;
 		pointer-events: none;
-
-		&:focus {
-			background: @inputBackground;
-		}
-
-		&:hover {
-			background: @inputBackground;
+		&:focus{
+			background:@inputBackground;
 		}
+		&:hover{
+			background:@inputBackground;
+		}	
 	}
 }
 
-.form-field {
-
-	width: 100%;
-	position: relative;
+.form-field{
+	
+	width:100%;
+	position:relative;
 	display: inline-block;
 	vertical-align: top;
-	margin-bottom: @fieldMargin;
-
-	input,
-	textarea {
-		.inputMixin();
-		padding: 4px;
+	margin-bottom:@fieldMargin;
+	
+	input, textarea{
+		.inputMixin;
+		padding:4px;
 	}
 
 	.caret {
-		top: -2px;
-	}
+        top: -2px;
+    }
 
 	select {
-		.inputMixin();
-		padding: 4px 15px 4px 4px;
-	}
+        .inputMixin;
+        padding: 4px 15px 4px 4px;
+    }
 
 	input[type=number] {
 		-moz-appearance: textfield;
 	}
-
-	textarea {
-		height: @inputHeight * 3;
-		resize: none;
-		padding-right: 25px;
+	
+	textarea{
+		height:@inputHeight * 3;
+		resize:none;
+		padding-right:25px;
 	}
 
-	&.invalid {
+	&.invalid{
 		color: @danger;
 	}
 
-	label {
-		font-size: @fontSizeSmall;
-		line-height: 21px;
+	label{
+		font-size:@fontSizeSmall;
+		line-height:21px;
 		display: inline-block;
 		vertical-align: top;
-		height: @labelHeight;
-		text-align: right;
-		padding-right: @labelPadding;
+		height:@labelHeight;
+		text-align:right;
+		padding-right:@labelPadding;
 		box-sizing: border-box;
 		width: @labelWidth;
-
-		&.label-top {
-			width: unset;
+		
+		&.label-top{
+			width:unset;
 			text-align: left;
-			padding-right: @labelPadding/2;
-			padding-left: @labelPadding/2;
+			padding-right:@labelPadding/2;
+			padding-left:@labelPadding/2;
 		}
 	}
 
-	.form-field-content {
-		width: calc(100% - @labelWidth);
+	.form-field-content{
+		width:calc(100% - @labelWidth);
 		display: inline-block;
 		vertical-align: top;
-		box-sizing: border-box;
+		box-sizing:border-box;
 
-		&.label-top {
-			padding-left: @labelPadding/2;
-			padding-right: @labelPadding/2;
-			width: 100%;
+		&.label-top{
+			padding-left:@labelPadding/2;
+			padding-right:@labelPadding/2;
+			width:100%;
 
-			.form-field-buttons {
-				top: @labelHeight;
+			.form-field-buttons{
+				top:@labelHeight;
 			}
 		}
 	}
 
-	.form-field-buttons {
-		position: absolute;
-		height: @inputHeight;
-		top: 0px;
-		right: 0px;
-		background: @inputBackground;
+	.form-field-buttons{
+		position:absolute;
+		height:@inputHeight;
+		top:0px;
+		right:0px;
+		background:@inputBackground;
 		z-index: 1000;
 	}
 
-	&.no-label {
-		.form-field-content {
-			width: calc(100% - @labelPadding);
-			margin-left: @labelPadding;
+	&.no-label{
+		.form-field-content{
+			width:calc(100% - @labelPadding);
+			margin-left:@labelPadding;
 		}
 	}
 }
 
-.filterable-cell-wrapper .form-field-buttons {
-	position: absolute;
-	height: 18px;
-	top: 4px;
-	right: 0px;
-	background: @inputBackground;
-	z-index: 1000;
-}
-
-.checkbox-field {
 
-	.checkbox {
-		.inputMixin();
-		display: flex;
+.checkbox-field{
+	
+	.checkbox{
+		.inputMixin;
+		display:flex;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;
-		width: 18px;
-		height: 18px;
-		padding: 2px;
+		width:18px;
+		height:18px;
+		padding:2px;
 		cursor: pointer;
 
 		.fa-check {
@@ -160,212 +150,153 @@
 	}
 }
 
-.button-group-field {
-	.override_variable {
-		cursor: not-allowed;
-
-		&:hover {
-			.item {
-				.buttons {
-					display: block;
-				}
-			}
-		}
-
-		.item {
-			top: 20px;
-			position: absolute;
-			background-color: transparent;
-			width: 100%;
-
-			.buttons {
-				display: none;
-				height: 20px;
-				float: right;
-				padding-right: 5px;
-			}
-		}
-	}
+.button-group-field{
 
-	.button-group {
+	.button-group{
 
-		.inputMixin();
+		.inputMixin;
 
-		&:hover {
-			background: @inputBackground;
+		&:hover{
+			background:@inputBackground;
 		}
-
-		.button-group-option {
-			height: 100%;
+		
+		.button-group-option{
+			height:100%;
 			user-select: none;
 			display: inline-block;
-			text-align: center;
+			text-align:center;
 			cursor: pointer;
 			padding-top: 1px;
 			box-sizing: border-box;
-			color: darken(@textDefault, 30%);
+			color:darken(@textDefault, 30%);
 			background: #373737;
-
-			&:hover {
-				background: darken(@inputBackground, 5%);
-			}
-
-			&.active {
-				cursor: auto;
-				background: unset;
-				color: unset;
+			&:hover{
+				background:darken(@inputBackground, 5%);
 			}
 
-			&.disabled {
-				cursor: not-allowed;
-				background: unset;
-				user-select: none;
+			&.active{
+				cursor:auto;
+				background:unset;
+				color:unset;
 			}
 
+			&.disabled svg {
+				color: gray;
+				}
 		}
 	}
 }
 
-.text-area-field {
+.text-area-field{
 
-	.form-field-buttons {
-		right: 10px;
-		background: none;
+	.form-field-buttons{
+		right:10px;
+		background:none;
 	}
 }
 
-.select-field {
-	&.override_variable {
-		.form-field-buttons {
-			display: none;
-		}
+.select-field{
 
-		.item {
-			width: fit-content !important;
-		}
-	}
-
-	select {
+	select{
 		line-height: 12px;
 	}
 }
 
-.text-field {
+.text-field{
 
-	.controlled-input {
-		padding-right: 25px;
+	.controlled-input{
+		padding-right:25px;
 	}
 }
 
-@sliderValWidth: 30px;
-
-.slider-field {
-
-	input {
-		width: calc(100% - @sliderValWidth);
-		margin: 0px;
-
-		&.toggle {
-			width: calc(100% - @sliderValWidth - 18px);
-		}
+@sliderValWidth:30px;
+.slider-field{
+	
+	input{
+		width:calc(100% - @sliderValWidth);
+		margin:0px;
 	}
 
-	.val {
+	.val{
 		display: inline-block;
 		vertical-align: top;
-		width: @sliderValWidth;
-		text-align: right;
-		padding: 2px;
+		width:@sliderValWidth;
+		text-align:right;
+		padding:2px;
 		line-height: 14px;
-		border-top: 2px solid @inputBackground;
-		border-right: 2px solid @inputBackground;
-		border-bottom: 2px solid @inputBackground;
-		height: @inputHeight;
-		box-sizing: border-box;
-		background: lighten(@inputBackground, 4%);
-	}
-
-	.checkbox {
-		.inputMixin();
-		line-height: 10px;
-		border: 1px solid @backgroundLight;
-		border-radius: 2px;
-		width: 18px;
-		height: 18px;
-		padding: 2px;
-		cursor: pointer;
-
-		.fa-check {
-			margin-left: 1px;
-		}
+		border-top:2px solid @inputBackground;
+		border-right:2px solid @inputBackground;
+		border-bottom:2px solid @inputBackground;
+		height:@inputHeight;
+		box-sizing:border-box;
+		background:lighten(@inputBackground, 4%);
 	}
 }
 
-.color-field {
-
-	.form-field-content {
+.color-field{
+	
+	.form-field-content{
 
-		&.label-top {
-
-			.picker {
-				top: @inputHeight + @labelHeight;
-
-				&.picker-left {
-					left: 0px;
+		&.label-top{
+			
+			.picker{
+				top:@inputHeight + @labelHeight;
+				&.picker-left{
+					left:0px;
 					top: -200px;
 				}
 
-				&.picker-right {
-					right: 0px;
+				&.picker-right{
+					right:0px;
 					top: -200px;
 				}
 			}
 		}
 
-		.swatch {
+		.swatch{
 			display: inline-block;
-			height: @inputHeight;
-			width: 100%;
+			height:@inputHeight;
+			width:100%;
 		}
-
-		.picker {
-			position: absolute;
-			top: @inputHeight + 3px;
-			z-index: 15000;
-
-			&.picker-left {
-				left: @labelWidth
+		
+		.picker{
+			position:absolute;
+			top:@inputHeight + 3px;
+			z-index:15000;
+
+			&.picker-left{
+				left:@labelWidth
 			}
 
-			&.picker-right {
-				right: 0px;
+			&.picker-right{
+				right:0px;
 			}
 
-			.sketch-picker {
+			.sketch-picker{
+			
+				background:@backgroundLight !important;
 
-				background: @backgroundLight !important;
-
-				input {
-					box-shadow: none !important;
+				input{
+					box-shadow:none !important;
 				}
-
-				span {
-					color: @textDefault !important;
+				
+				span{
+					color:@textDefault !important;
 				}
 
-				label {
-					width: unset;
+				label{
+					width:unset;
 				}
 
-				.flexbox-fix {
-					border-top: none !important;
+				.flexbox-fix{
+					border-top:none !important;
 				}
 			}
 		}
 	}
 }
 
-.caret {
+.caret{
 	display: block;
 	width: 18px;
 	height: 100%;
@@ -374,7 +305,7 @@
 	box-sizing: border-box;
 	user-select: none;
 	pointer-events: none;
-	color: lighten(@inputBackground, 10%);
-	position: absolute;
-	left: -18px;
-}
+	color:lighten(@inputBackground, 10%);
+    position: absolute;
+    left: -18px;
+}