diff --git a/packages/clay/src/scss/components/_custom-forms.scss b/packages/clay/src/scss/components/_custom-forms.scss index 488de63ee4..7cf7a9ca9d 100644 --- 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 index 86bfe68377..b1cb063320 100644 --- 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 index 573cf20a3f..c7f7e65461 100644 --- 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;