@imposium-hub/components 2.11.6-0 → 2.12.0

package/dist/styles.less

@@ -732,7 +732,7 @@ body{
 @buttonMargin:2px;
 
 .imposium-btn{
- 
+
 	display: inline-block;
 	box-sizing: border-box;
 	border-radius:2px;
@@ -769,10 +769,6 @@ body{
 		pointer-events:none;
 	}
 
-	&.icon-toggle {
-		padding-top: 4px;
-	}
-
 	.loading-icon{
 
 		svg{
@@ -1024,133 +1020,28 @@ body{
 		}
 	}
 }
-.override_variable {
-
-	&.color,
-	&.text,
-	&.number {
-		.controlled-list {
-			.item {
-				margin-top: unset;
-				margin-bottom: unset;
-				color: rgba(223, 223, 223, 0.4);
-				width: 100%;
-				.buttons {
-					right: 0px;
-					top: 0px !important;
-				}
-			}
-		}
-	}
-
-	&.text, &.number {
-		.item {
-			width: fit-content;
-		}
-	}
-
-	&.boolean {
-		min-width: unset !important;
-
-		.item.checkbox {
-			margin-top: unset;
-			margin-bottom: unset;
-			background: #1d1d1d;
-			color: rgba(223, 223, 223, 0.4);
-			font-size: 12px;
-			box-sizing: border-box;
-			vertical-align: top;
-			font-family: 'Roboto Condensed', sans-serif;
-			appearance: none;
-			display: flex;
-			border: 1px solid #353535;
-			border-radius: 2px;
-			width: 18px;
-			height: 18px;
-			padding: 2px;
-
-			svg {
-				margin-left: 1px;
-			}
-
-			.buttons svg {
-				margin-left: 2px;
-			}
 
-			&:hover {
-				.buttons {
-					top: -2px;
-					right: -3px;
-					background: unset;
-				}
-			}
-		}
-	}
-
-	&.textarea {
-		.item {
-			margin: 0;
-
-			.buttons {
-				right: 0px;
-			}
-		}
-	}
-
-	&.number,
-	&.text,
-	&.color {
-		.item {
-			background-color: @backgroundDark;
+.controlled-list{
 
-			p {
-				padding: 0 4px;
-				white-space: nowrap;
-			}
-		}
-
-	}
-
-}
-
-.controlled-list {
-
-	width: 100%;
-
-	.item {
-		position: relative;
-		width: 100%;
-		height: @inputHeight;
-		margin-top: @fieldMargin / 2;
-		margin-bottom: @fieldMargin / 2;
-
-		&.icon-toggle {
-			color: rgba(223, 223, 223, 0.4);
-			position: absolute !important;
-			width: 100% !important;
-			height: 96% !important;
-			margin-top: unset;
-			svg {
-				padding-bottom: 1px;
-			}
-			.buttons {
-				right: -1px;
-			}
-		}
+	width:100%;
 
-		&:hover {
-			.imposium-btn {
-				background: unset;
-			}
+	.item{
+		position:relative;
+		width:100%;
+		height:@inputHeight;
+		margin-top:@fieldMargin / 2;
+		margin-bottom:@fieldMargin / 2;
 
-			.buttons {
+		&:hover{
+			background:@background;
+			.buttons{
 				display: block;
 			}
 		}
 
-		.buttons {
+		.buttons{
 			display: none;
-			position: absolute;
+			position:absolute;
 			right: 10px;
 			top: 2px;
 		}
@@ -1430,9 +1321,6 @@ body{
     border-radius: 2px;
     transition: transform 190ms @easeOutQuint, opacity 160ms @easeOutQuart;
     z-index: 2147483647;
-    &.variables {
-        border: unset;
-    }
 }
 
 
@@ -1444,160 +1332,158 @@ body{
 	font-weight: normal;
 	font-size:80px;
 }
-@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 {
+	margin-bottom:@fieldMargin;
+	
+	input, textarea{
 		.inputMixin;
-		padding: 4px;
+		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;
+.filterable-cell-wrapper .form-field-buttons{
+	position:absolute;
 	height: 18px;
-	top: 4px;
-	right: 0px;
-	background: @inputBackground;
+	top:4px;
+	right:0px;
+	background:@inputBackground;
 	z-index: 1000;
 }
 
-.checkbox-field {
-
-	.checkbox {
+.checkbox-field{
+	
+	.checkbox{
 		.inputMixin;
-		display: flex;
+		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 {
@@ -1606,139 +1492,100 @@ body{
 	}
 }
 
-.button-group-field {
-	.override_variable {
-		cursor: not-allowed;
+.button-group-field{
 
-		&: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 {
+	.button-group{
 
 		.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;
-		}
-
-		.item {
-			width: fit-content !important;
-		}
-	}
+.select-field{
 
-	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;
+@sliderValWidth:30px;
+.slider-field{
+	
+	input{
+		width:calc(100% - @sliderValWidth);
+		margin:0px;
 
-		&.toggle {
-			width: calc(100% - @sliderValWidth - 18px);
+		&.toggle{
+			width:calc(100% - @sliderValWidth - 18px);
 		}
 	}
 
-	.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%);
+		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 {
+	.checkbox{
 		.inputMixin;
 		line-height: 10px;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;
-		width: 18px;
-		height: 18px;
-		padding: 2px;
+		width:18px;
+		height:18px;
+		padding:2px;
 		cursor: pointer;
 
 		.fa-check {
@@ -1747,71 +1594,70 @@ body{
 	}
 }
 
-.color-field {
-
-	.form-field-content {
-
-		&.label-top {
-
-			.picker {
-				top: @inputHeight + @labelHeight;
-
-				&.picker-left {
-					left: 0px;
+.color-field{
+	
+	.form-field-content{
+
+		&.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 {
-			position: absolute;
-			top: @inputHeight + 3px;
-			z-index: 15000;
-
-			&.picker-left {
-				left: @labelWidth
+			&.picker-left{
+				left:@labelWidth
 			}
 
-			&.picker-right {
-				right: 0px;
+			&.picker-right{
+				right:0px;
 			}
 
-			.sketch-picker {
-
-				background: @backgroundLight !important;
+			.sketch-picker{
+			
+				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%;
@@ -1820,10 +1666,11 @@ body{
 	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;
 }
+
 @headerHeight: 50px;
 @defaultBGColor: #212124;
 @defaultBorderColor: #494949;
@@ -3366,19 +3213,18 @@ h3{
         // }
     }
 }
+
 #font-picker {
 	position: relative;
 	display: inline-block;
-	width: 100%;
-	box-sizing: border-box;
-	-webkit-appearance: none;
-	-moz-appearance: none;
-	appearance: none;
-	box-shadow: none;
-
-	ul {
-		width: inherit !important;
-	}
+	width: 200px;
+    width: 100%;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 0 2px;
+    box-shadow: none;
 
 	* {
 		box-sizing: border-box;
@@ -3406,9 +3252,8 @@ h3{
 		height: 20px;
 		padding: 0 4px;
 		background: #1d1d1d;
-
-		&:hover,
-		&:focus {
+        
+		&:hover, &:focus {
 			background: #151515;
 		}
 
@@ -3479,10 +3324,8 @@ h3{
 				height: 100%;
 				padding-left: 3px;
 				white-space: nowrap;
-
-				&:hover,
-				&:focus,
-				&.active-font {
+                
+				&:hover, &:focus, &.active-font {
 					background: #2d8ceb;
 				}
 			}
@@ -3501,6 +3344,7 @@ h3{
 		max-height: 200px;
 	}
 }
+
 .contextmenu {
 	background: #161616;
     position: absolute;