@imposium-hub/components 2.13.7 → 2.14.0

package/less/components/button.less

@@ -2,7 +2,7 @@
 @buttonMargin:2px;
 
 .imposium-btn{
-
+ 
 	display: inline-block;
 	box-sizing: border-box;
 	border-radius:2px;
@@ -39,6 +39,10 @@
 		pointer-events:none;
 	}
 
+	&.icon-toggle {
+		padding-top: 4px;
+	}
+
 	.loading-icon{
 
 		svg{

package/less/components/controlled-list.less

@@ -1,25 +1,134 @@
+.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;
+				}
+			}
+		}
+	}
+
+	&.text, &.number {
+		.item {
+			width: fit-content;
+			input {
+				opacity: 0.6;
+				cursor: default;
+			}
+		}
+	}
+
+	&.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;
 
-	width:100%;
+			.buttons {
+				right: 0px;
+			}
+		}
+	}
+
+	&.number,
+	&.text,
+	&.color {
+		.item {
+			background-color: @backgroundDark;
+
+			p {
+				padding: 0 4px;
+				white-space: nowrap;
+			}
+		}
+
+	}
 
-	.item{
-		position:relative;
-		width:100%;
-		height:@inputHeight;
-		margin-top:@fieldMargin / 2;
-		margin-bottom:@fieldMargin / 2;
+}
+
+.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;
+			}
 
-		&:hover{
-			background:@background;
-			.buttons{
+			.buttons {
 				display: block;
 			}
 		}
 
-		.buttons{
+		.buttons {
 			display: none;
-			position:absolute;
+			position: absolute;
 			right: 10px;
 			top: 2px;
 		}

package/less/components/dropdown.less

@@ -7,4 +7,7 @@
     border-radius: 2px;
     transition: transform 190ms @easeOutQuint, opacity 160ms @easeOutQuart;
     z-index: 2147483647;
+    &.variables {
+        border: unset;
+    }
 }

package/less/components/font-picker.less

@@ -1,15 +1,16 @@
-
 #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;
@@ -37,8 +38,9 @@
 		height: 20px;
 		padding: 0 4px;
 		background: #1d1d1d;
-        
-		&:hover, &:focus {
+
+		&:hover,
+		&:focus {
 			background: #151515;
 		}
 
@@ -109,8 +111,10 @@
 				height: 100%;
 				padding-left: 3px;
 				white-space: nowrap;
-                
-				&:hover, &:focus, &.active-font {
+
+				&:hover,
+				&:focus,
+				&.active-font {
 					background: #2d8ceb;
 				}
 			}
@@ -128,4 +132,4 @@
 	ul {
 		max-height: 200px;
 	}
-}
+}