@imposium-hub/components 2.13.6 → 2.13.8-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,6 +769,10 @@ body{
 		pointer-events:none;
 	}
 
+	&.icon-toggle {
+		padding-top: 4px;
+	}
+
 	.loading-icon{
 
 		svg{
@@ -1020,28 +1024,137 @@ body{
 		}
 	}
 }
+.override_variable {
 
-.controlled-list{
+	&.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;
+				}
+			}
+		}
+	}
 
-	width:100%;
+	&.text, &.number {
+		.item {
+			width: fit-content;
+			input {
+				opacity: 0.6;
+				cursor: default;
+			}
+		}
+	}
 
-	.item{
-		position:relative;
-		width:100%;
-		height:@inputHeight;
-		margin-top:@fieldMargin / 2;
-		margin-bottom:@fieldMargin / 2;
+	&.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;
+			}
+		}
+	}
 
-		&:hover{
-			background:@background;
-			.buttons{
+	&.number,
+	&.text,
+	&.color {
+		.item {
+			background-color: @backgroundDark;
+
+			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;
+			}
+		}
+
+		&:hover {
+			.imposium-btn {
+				background: unset;
+			}
+
+			.buttons {
 				display: block;
 			}
 		}
 
-		.buttons{
+		.buttons {
 			display: none;
-			position:absolute;
+			position: absolute;
 			right: 10px;
 			top: 2px;
 		}
@@ -1322,6 +1435,9 @@ body{
     border-radius: 2px;
     transition: transform 190ms @easeOutQuint, opacity 160ms @easeOutQuart;
     z-index: 2147483647;
+    &.variables {
+        border: unset;
+    }
 }
 
 
@@ -1333,158 +1449,160 @@ body{
 	font-weight: normal;
 	font-size:80px;
 }
+@labelWidth: 100px;
+@inputHeight: 20px;
+@labelHeight: 20px;
+@fieldMargin: 4px;
+@labelPadding: 4px;
+@inputPadding: 30px;
 
-@labelWidth:100px;
-@inputHeight:20px;
-@labelHeight:20px;
-@fieldMargin:4px;
-@labelPadding:5px;
-@inputPadding:30px;
-
-.inputMixin{
+.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;
+
+		&:focus {
+			background: @inputBackground;
+		}
+
+		&:hover {
+			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 {
@@ -1493,100 +1611,139 @@ body{
 	}
 }
 
-.button-group-field{
+.button-group-field {
+	.override_variable {
+		cursor: not-allowed;
+
+		&:hover {
+			.item {
+				.buttons {
+					display: block;
+				}
+			}
+		}
 
-	.button-group{
+		.item {
+			top: 20px;
+			position: absolute;
+			background-color: transparent;
+			width: 100%;
+
+			.buttons {
+				display: none;
+				height: 20px;
+				float: right;
+				padding-right: 5px;
+			}
+		}
+	}
+
+	.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%);
+
+			&:hover {
+				background: darken(@inputBackground, 5%);
 			}
 
-			&.active{
-				cursor:auto;
-				background:unset;
-				color:unset;
+			&.active {
+				cursor: auto;
+				background: unset;
+				color: unset;
+			}
+
+			&.disabled {
+				cursor: not-allowed;
+				background: unset;
+				user-select: none;
 			}
 
-			&.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{
+.select-field {
+	&.override_variable {
+		.form-field-buttons {
+			display: none;
+		}
 
-	select{
+		.item {
+			width: fit-content !important;
+		}
+	}
+
+	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 {
 
-		&.toggle{
-			width:calc(100% - @sliderValWidth - 18px);
+	input {
+		width: calc(100% - @sliderValWidth);
+		margin: 0px;
+
+		&.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 {
@@ -1595,70 +1752,71 @@ 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-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{
-			
-				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%;
@@ -1667,11 +1825,10 @@ 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;
@@ -3232,18 +3389,19 @@ h3{
         // }
     }
 }
-
 #font-picker {
 	position: relative;
 	display: inline-block;
-	width: 200px;
-    width: 100%;
-    box-sizing: border-box;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    padding: 0 2px;
-    box-shadow: none;
+	width: 100%;
+	box-sizing: border-box;
+	-webkit-appearance: none;
+	-moz-appearance: none;
+	appearance: none;
+	box-shadow: none;
+
+	ul {
+		width: inherit !important;
+	}
 
 	* {
 		box-sizing: border-box;
@@ -3271,8 +3429,9 @@ h3{
 		height: 20px;
 		padding: 0 4px;
 		background: #1d1d1d;
-        
-		&:hover, &:focus {
+
+		&:hover,
+		&:focus {
 			background: #151515;
 		}
 
@@ -3343,8 +3502,10 @@ h3{
 				height: 100%;
 				padding-left: 3px;
 				white-space: nowrap;
-                
-				&:hover, &:focus, &.active-font {
+
+				&:hover,
+				&:focus,
+				&.active-font {
 					background: #2d8ceb;
 				}
 			}
@@ -3363,7 +3524,6 @@ h3{
 		max-height: 200px;
 	}
 }
-
 .contextmenu {
 	background: #161616;
     position: absolute;