@imposium-hub/components 2.15.0-0 → 2.15.0-2

package/dist/styles.less

@@ -376,6 +376,10 @@ body{
         align-items: center;
         justify-content: space-between;
         padding: 5px;
+
+        .form-field {
+            min-width: 140px !important;
+        }
     }
 
     .uploads-list {
@@ -412,9 +416,6 @@ body{
 
     .form-field {
         vertical-align: top;
-        label {
-            width: 120px;
-        }
 
         .form-field-content {
             width: calc(100% - 120px);
@@ -462,7 +463,7 @@ body{
         align-items: center;
 
         .jump-to-page {
-            .inputMixin;
+            .inputMixin();
             width: 30px;
             margin: 0 3px;
         }
@@ -653,7 +654,7 @@ body{
     background-color: @background;
 
     &.transparent {
-        .chess;
+        .chess();
     }
 
     &.hidden {
@@ -679,7 +680,7 @@ body{
 }
 
 .auth-gate {
-  .layer;
+  .layer();
   display: flex;
   align-items: center;
   justify-content: center;
@@ -1323,7 +1324,7 @@ body{
     }
 
     .ip-table-loader {
-        .layer;
+        .layer();
         display: flex;
         align-items: center;
         justify-content: center;
@@ -1375,7 +1376,7 @@ body{
         }
         
         .paginator-input {
-            .inputMixin;
+            .inputMixin();
             width: 60px;
         }
 
@@ -1410,7 +1411,7 @@ body{
     border-radius: 5px;
 
     .progress-bg {
-        .layer;
+        .layer();
         background-color: @backgroundHighlight;
         transform-origin: left;
         border-radius: 5px;
@@ -1418,7 +1419,7 @@ body{
     }
 
     .progress-copy {
-        .layer;
+        .layer();
         text-align: center;
         line-height: 20px;
         border-radius: 5px;
@@ -1442,7 +1443,7 @@ body{
 
 
 .font-preview{
-	.layer;
+	.layer();
 	text-align: center;
 	background: white;
 	color:black;
@@ -1504,7 +1505,7 @@ body{
 
 	input,
 	textarea {
-		.inputMixin;
+		.inputMixin();
 		padding: 4px;
 	}
 
@@ -1513,7 +1514,7 @@ body{
 	}
 
 	select {
-		.inputMixin;
+		.inputMixin();
 		padding: 4px 15px 4px 4px;
 	}
 
@@ -1596,7 +1597,7 @@ body{
 .checkbox-field {
 
 	.checkbox {
-		.inputMixin;
+		.inputMixin();
 		display: flex;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;
@@ -1640,7 +1641,7 @@ body{
 
 	.button-group {
 
-		.inputMixin;
+		.inputMixin();
 
 		&:hover {
 			background: @inputBackground;
@@ -1737,7 +1738,7 @@ body{
 	}
 
 	.checkbox {
-		.inputMixin;
+		.inputMixin();
 		line-height: 10px;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;
@@ -1903,7 +1904,7 @@ body{
 }
 
 .anchor {
-    .font-style;
+    .font-style();
     cursor: pointer;
     font-size: @fontSizeDefault;
     text-decoration: none;
@@ -1918,7 +1919,7 @@ body{
 }
 
 .circle-style {
-    .no-select;
+    .no-select();
     border-radius: 50%;
     width: 28px;
     height: 28px;
@@ -1936,12 +1937,12 @@ body{
     cursor: pointer;
     outline: none;
     box-sizing: border-box;
-    .no-select;
-    .font-style;
+    .no-select();
+    .font-style();
 }
 
 .faux-select {
-    .btn-reset;
+    .btn-reset();
     display: flex;
     align-items: center;
     font-size: 14px;
@@ -1959,7 +1960,7 @@ body{
 }
 
 .imposium-header {
-    .flex-row;
+    .flex-row();
     z-index: 100000;
     position: absolute;
     top: 0px;
@@ -1972,17 +1973,17 @@ body{
     line-height: 1.5;
 
     .inner-content {
-        .flex-row;
+        .flex-row();
         width: 100%;
         max-width: @defaultMaxWidth;
         justify-content: space-between;
         margin: 0px 15px;
 
         .inner-left {
-            .flex-row;
+            .flex-row();
 
             .title {
-                .flex-row;
+                .flex-row();
                 margin-right: 20px;
                 text-decoration: none;
 
@@ -2005,7 +2006,7 @@ body{
                 }
 
                 .heading {
-                    .font-style;
+                    .font-style();
                     margin: 0;
                     font-size: 20px;
                     font-weight: normal;
@@ -2013,12 +2014,12 @@ body{
             }
 
             .btn-toggle-services {
-                .faux-select;
+                .faux-select();
             }
         }
 
         .inner-right {
-            .flex-row;
+            .flex-row();
 
             a{
                 border:none;
@@ -2035,22 +2036,22 @@ body{
             }
             
             .btn-help {
-                .circle-style;
+                .circle-style();
                 margin-left: 15px;
                 font-size:28px;
             }
             
             .btn-toggle-orgs {
-                .btn-reset;
-                .circle-style;
+                .btn-reset();
+                .circle-style();
                 margin-left: 15px;
             }
             
             .btn-toggle-story {
-                .faux-select;
+                .faux-select();
 
                 .story-name {
-                    .ellipsis;
+                    .ellipsis();
                     text-transform: none;
                     font-size: 17px;
                     max-width: 220px;
@@ -2058,7 +2059,7 @@ body{
             }
 
             .btn-logout {
-                .btn-reset;
+                .btn-reset();
                 padding: 10px 0px;
                 font-size: 14px;
             }
@@ -2079,7 +2080,7 @@ body{
             box-sizing: border-box;
 
             .service-menu-heading {
-                .secondary-font-style;
+                .secondary-font-style();
                 font-size: @fontSizeDefault;
                 text-transform: uppercase;
                 color: #b1b1b1;
@@ -2104,7 +2105,7 @@ body{
                     }
 
                     a {
-                        .anchor;
+                        .anchor();
                         display: flex;
                         align-items: center;
                         color: white;
@@ -2165,14 +2166,14 @@ body{
             color: white
         }
         .orgs-menu-active-org {
-            .font-style;
-            .flex-row;
+            .font-style();
+            .flex-row();
             padding: 10px;
             border-bottom: 1px solid @defaultBorderColor;
             background-color: @defaultBorderColor;
 
             .active-first-char {
-                .circle-style;
+                .circle-style();
                 width: 40px;
                 height: 40px;
                 font-size: 18px;
@@ -2184,7 +2185,7 @@ body{
             color: white;
         }
         .menu-item, .react-select__option {
-            .btn-reset;
+            .btn-reset();
             width: 100%;
             padding: 10px;
             font-size: 12px;
@@ -2194,12 +2195,12 @@ body{
                 background-color: #494949
             }
             .inactive-first-char {
-               .circle-style;
+               .circle-style();
                margin-right: 10px;
             }
 
             &.inactive-org-button {
-                .flex-row;
+                .flex-row();
                 box-sizing: border-box;
                 padding: 10px;
             }
@@ -2210,13 +2211,13 @@ body{
         }
 
         .orgs-menu-footer {
-            .flex-row;
+            .flex-row();
             justify-content: space-between;
             border-top: 1px solid @defaultBorderColor;
 
             .email {
-                .secondary-font-style;
-                .ellipsis;
+                .secondary-font-style();
+                .ellipsis();
                 color: #b1b1b1;
                 font-size: 12px;
                 text-transform: lowercase;
@@ -2224,7 +2225,7 @@ body{
             }
 
             .btn-logout {
-                .btn-reset;
+                .btn-reset();
                 font-size: 12px;
                 padding: 10px 15px;
             }
@@ -2259,10 +2260,10 @@ body{
 .modal{
 	
 	z-index:10000;
-	.layer;
+	.layer();
 
 	.modal-bg{
-		.layer;
+		.layer();
 		background: fadeout(@backgroundDark, 20%);
 	}
 
@@ -2327,7 +2328,7 @@ body{
 
 .media-player{
 
-	.layer;
+	.layer();
 
 	.inner-viewer{
 		position:absolute;
@@ -2336,7 +2337,7 @@ body{
 			width:100%;
 			height:100%;
 			outline:1px solid darken(@backgroundDark, 10%);
-			.chess
+			.chess()
 		}
 
 		video{
@@ -2511,6 +2512,7 @@ body{
         color: white;
         border: 1px solid @backgroundHighlight;
         border-radius: 3px;
+        font-family: inherit;
         font-size: @sectionFontSize;
         resize: vertical;
 
@@ -2630,12 +2632,11 @@ body{
 }
 
 .change-report-tree {
-    background: @backgroundDark;
+    background: @inputBackground;
     border-radius: 4px;
-    padding: 10px;
+    padding: 14px;
     box-sizing: border-box;
     overflow-y: auto;
-    max-height: 300px;
     margin-bottom: 12px;
     color: @textDefault;
 
@@ -2697,10 +2698,10 @@ body{
 
 .change-report-status {
     display: inline-block;
-    font-size: 10px;
+    font-size: 11px;
     font-weight: bold;
     border-radius: 3px;
-    padding: 1px 5px;
+    padding: 2px 6px;
     margin-right: 6px;
     flex-shrink: 0;
 
@@ -2740,6 +2741,13 @@ body{
     flex-wrap: wrap;
 }
 
+.change-report-value {
+    background: @backgroundHighlight;
+    color: @textDefault;
+    border-radius: 3px;
+    padding: 1px 6px;
+}
+
 .change-report-value-arrow {
     color: @backgroundHighlight;
 }
@@ -2752,7 +2760,7 @@ body{
 @headerPadding:2px;
 
 .section{
-	.layer;
+	.layer();
 
 	.section-header{
 		background:lighten(@backgroundLight, 10%);
@@ -2811,7 +2819,7 @@ body{
 	}
 
 	.section-content{
-		.layer;
+		.layer();
 		top:@sectionHeaderHeight;
 		height:calc(100% - @sectionHeaderHeight);
 		padding:@sectionPadding;
@@ -2912,7 +2920,7 @@ body{
 
 .static-composition-editor{
 
-	.layer;
+	.layer();
 
 	.composition-config{
 		position: absolute;
@@ -2927,14 +2935,14 @@ body{
 	}
 
 	.composition-preview{
-		.layer;
+		.layer();
 		left:@compConfigWidth;
 		width:calc(100% - @compConfigWidth);
 	}
 }
 
 .static-composition-renderer{
-	.layer;
+	.layer();
 	font-family:'Arial';
 	border:2px solid @backgroundLight;
 }
@@ -2946,7 +2954,7 @@ body{
 
 .composition-text-layer{
 	will-change:transform;
-	.layer;
+	.layer();
 
 	.inner-text{
 		display: inline-block;
@@ -3114,7 +3122,7 @@ body{
 
 .story-viewer{
     
-    .layer;
+    .layer();
     
     background:@backgroundDark;
 
@@ -3130,7 +3138,7 @@ body{
     }
     
     .log{
-        .layer;
+        .layer();
         overflow-y: scroll;
         padding:10px;
         box-sizing:border-box;
@@ -3170,7 +3178,7 @@ body{
         width:calc(100% - @storyViewerVarWidth);
 
         .content-header{
-            .layer;
+            .layer();
             box-sizing: border-box;
             padding-top:4px;
             padding-left:4px;
@@ -3206,7 +3214,7 @@ body{
         }
 
         .content-wrapper{
-            .layer;
+            .layer();
             background-color: rgb(35,35,35);
             top:@storyViewerHeaderHeight;
             height:calc(100% - @storyViewerHeaderHeight);
@@ -3219,7 +3227,7 @@ body{
 @tabWidth:80px;
 
 .tabs{
-    .layer;
+    .layer();
     .tab-header{
         white-space: nowrap;
         position: absolute;
@@ -3265,12 +3273,12 @@ body{
     }
     .tab-content{
         overflow-y: auto;
-        .layer;
+        .layer();
         top:@tabHeight;
         height:calc(100% - @tabHeight);
 
         .tab-content-wrapper{
-            .layer;
+            .layer();
         }
     }
 }

package/less/components/assets.less

@@ -130,6 +130,10 @@
         align-items: center;
         justify-content: space-between;
         padding: 5px;
+
+        .form-field {
+            min-width: 140px !important;
+        }
     }
 
     .uploads-list {
@@ -166,9 +170,6 @@
 
     .form-field {
         vertical-align: top;
-        label {
-            width: 120px;
-        }
 
         .form-field-content {
             width: calc(100% - 120px);
@@ -216,7 +217,7 @@
         align-items: center;
 
         .jump-to-page {
-            .inputMixin;
+            .inputMixin();
             width: 30px;
             margin: 0 3px;
         }
@@ -407,7 +408,7 @@
     background-color: @background;
 
     &.transparent {
-        .chess;
+        .chess();
     }
 
     &.hidden {

package/less/components/auth-gate.less

@@ -1,5 +1,5 @@
 .auth-gate {
-  .layer;
+  .layer();
   display: flex;
   align-items: center;
   justify-content: center;

package/less/components/change-report.less

@@ -1,11 +1,10 @@
 
 .change-report-tree {
-    background: @backgroundDark;
+    background: @inputBackground;
     border-radius: 4px;
-    padding: 10px;
+    padding: 14px;
     box-sizing: border-box;
     overflow-y: auto;
-    max-height: 300px;
     margin-bottom: 12px;
     color: @textDefault;
 
@@ -67,10 +66,10 @@
 
 .change-report-status {
     display: inline-block;
-    font-size: 10px;
+    font-size: 11px;
     font-weight: bold;
     border-radius: 3px;
-    padding: 1px 5px;
+    padding: 2px 6px;
     margin-right: 6px;
     flex-shrink: 0;
 
@@ -110,6 +109,13 @@
     flex-wrap: wrap;
 }
 
+.change-report-value {
+    background: @backgroundHighlight;
+    color: @textDefault;
+    border-radius: 3px;
+    padding: 1px 6px;
+}
+
 .change-report-value-arrow {
     color: @backgroundHighlight;
 }

package/less/components/data-table.less

@@ -161,7 +161,7 @@
     }
 
     .ip-table-loader {
-        .layer;
+        .layer();
         display: flex;
         align-items: center;
         justify-content: center;
@@ -213,7 +213,7 @@
         }
         
         .paginator-input {
-            .inputMixin;
+            .inputMixin();
             width: 60px;
         }
 

package/less/components/determinate-loader.less

@@ -6,7 +6,7 @@
     border-radius: 5px;
 
     .progress-bg {
-        .layer;
+        .layer();
         background-color: @backgroundHighlight;
         transform-origin: left;
         border-radius: 5px;
@@ -14,7 +14,7 @@
     }
 
     .progress-copy {
-        .layer;
+        .layer();
         text-align: center;
         line-height: 20px;
         border-radius: 5px;

package/less/components/font-preview.less

@@ -1,6 +1,6 @@
 
 .font-preview{
-	.layer;
+	.layer();
 	text-align: center;
 	background: white;
 	color:black;

package/less/components/form-field.less

@@ -53,7 +53,7 @@
 
 	input,
 	textarea {
-		.inputMixin;
+		.inputMixin();
 		padding: 4px;
 	}
 
@@ -62,7 +62,7 @@
 	}
 
 	select {
-		.inputMixin;
+		.inputMixin();
 		padding: 4px 15px 4px 4px;
 	}
 
@@ -145,7 +145,7 @@
 .checkbox-field {
 
 	.checkbox {
-		.inputMixin;
+		.inputMixin();
 		display: flex;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;
@@ -189,7 +189,7 @@
 
 	.button-group {
 
-		.inputMixin;
+		.inputMixin();
 
 		&:hover {
 			background: @inputBackground;
@@ -286,7 +286,7 @@
 	}
 
 	.checkbox {
-		.inputMixin;
+		.inputMixin();
 		line-height: 10px;
 		border: 1px solid @backgroundLight;
 		border-radius: 2px;