Fixes: (liferay#675) Create Simple File Upload pattern with `.input-g…

…roup` and `.form-file` Update: (liferay#675) Input Group `.btn` inside `.form-file` should size with `.input-group-sm` and `.input-group-lg` Update: (liferay#675) Form File with `.btn` should unround corners when used with `.input-group-prepend` and `.input-group-append` Update: (liferay#675) Forms added `.form-control-plaintext` support for Forms and Input Group
pat270 · Mar 2, 2018 · c58750b · c58750b
1 parent 326dbf7
commit c58750b
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 4 deletions.
diff --git a/packages/clay/src/scss/components/_custom-forms.scss b/packages/clay/src/scss/components/_custom-forms.scss
@@ -7,6 +7,7 @@
 	cursor: $input-file-cursor;
 	height: 100%;
 	opacity: 0;
+	overflow: hidden;
 	position: absolute;
 	width: 100%;
 	z-index: 10;

diff --git a/packages/clay/src/scss/components/_forms.scss b/packages/clay/src/scss/components/_forms.scss
@@ -113,6 +113,30 @@ label {
 	}
 }
 
+.form-control-plaintext {
+	background-clip: border-box;
+	border-width: $input-border-width;
+
+	@if not ($input-font-size == $font-size-base) {
+		font-size: $input-font-size;
+	}
+
+	height: $input-height;
+	min-width: 0;
+
+	@if not ($input-padding-y == $btn-padding-y) {
+		padding-bottom: $input-padding-y;
+		padding-top: $input-padding-y;
+	}
+
+	text-overflow: ellipsis;
+
+	@include clay-scale-component {
+		font-size: $input-font-size-mobile;
+		height: $input-height-mobile;
+	}
+}
+
 // Select
 
 .form-control[multiple],
@@ -159,8 +183,14 @@ select.form-control:not([multiple]):not([size]) {
 
 // Textarea
 
-textarea.form-control {
-	height: $input-textarea-height;
+textarea {
+	&.form-control {
+		height: $input-textarea-height;
+	}
+
+	&.form-control-plaintext {
+		height: $input-textarea-height;
+	}
 }
 
 // File

diff --git a/packages/clay/src/scss/components/_input-groups.scss b/packages/clay/src/scss/components/_input-groups.scss
@@ -88,6 +88,20 @@
 	}
 }
 
+// Input Group Prepend and Append Rounded Corners
+
+.input-group > .input-group-prepend > .form-file .btn,
+.input-group > .input-group-append:not(:last-child) > .form-file .btn,
+.input-group > .input-group-append:last-child > .form-file:not(:last-child) .btn {
+	@include border-right-radius(0);
+}
+
+.input-group > .input-group-append > .form-file .btn,
+.input-group > .input-group-prepend:not(:first-child) > .form-file .btn,
+.input-group > .input-group-prepend:first-child > .form-file:not(:first-child) .btn {
+	@include border-left-radius(0);
+}
+
 // Input Group Text
 
 .input-group-text {
@@ -286,7 +300,8 @@
 			}
 		}
 
-		.form-control {
+		.form-control,
+		.form-file .btn {
 			font-size: $input-font-size-lg;
 			height: $input-height-lg;
 			line-height: $input-line-height-lg;
@@ -300,6 +315,18 @@
 			}
 		}
 
+		.form-control-plaintext {
+			font-size: $input-font-size-lg;
+			height: $input-height-lg;
+			line-height: $input-line-height-lg;
+			padding-bottom: $input-padding-y-lg;
+			padding-top: $input-padding-y-lg;
+
+			@include clay-scale-component {
+				height: $input-height-lg-mobile;
+			}
+		}
+
 		.input-group-text {
 			font-size: $input-font-size-lg;
 			height: $input-height-lg;
@@ -344,7 +371,8 @@
 			}
 		}
 
-		.form-control {
+		.form-control,
+		.form-file .btn {
 			font-size: $input-font-size-sm;
 			height: $input-height-sm;
 			line-height: $input-line-height-sm;
@@ -358,6 +386,18 @@
 			}
 		}
 
+		.form-control-plaintext {
+			font-size: $input-font-size-sm;
+			height: $input-height-sm;
+			line-height: $input-line-height-sm;
+			padding-bottom: $input-padding-y-sm;
+			padding-top: $input-padding-y-sm;
+
+			@include clay-scale-component {
+				height: $input-height-sm-mobile;
+			}
+		}
+
 		.input-group-text {
 			font-size: $input-font-size-sm;
 			height: $input-height-sm;