diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser-column-provider.component.less')
-rw-r--r-- | catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser-column-provider.component.less | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser-column-provider.component.less b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser-column-provider.component.less new file mode 100644 index 0000000000..07241a8aff --- /dev/null +++ b/catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser-column-provider.component.less @@ -0,0 +1,92 @@ +.adaptive_placeholder(@height, @radius, @margin: 0em, @border: 1px) { + @borders: (@border * 2); + box-sizing: border-box; + width: 80%; + height: ~"calc(@{height} + @{borders})"; + margin: @margin; + padding: @margin; + border: @border solid #00bafa; + border-radius: @radius; + background: #fff; + resize: none; + outline: none; + &[required] { + &:focus { + border-color: #00bafa; + + label { + &[placeholder] { + &:before { + margin: 0; + color: #00bafa; + } + } + } + } + &:focus, + &:valid { + + label { + &[placeholder] { + &:before { + transform: translate(0, (-1em)) scale(.9, .9); + } + } + } + } + &:invalid { + + label { + &[placeholder] { + &[alt] { + &:before { + content: attr(alt); + } + } + } + } + } + + label { + &[placeholder] { + display: block; + pointer-events: none; + line-height: @margin * 1.25; + margin-top: ~"calc(-1em - @{borders})"; + margin-bottom: ~"calc((@{height} - @{margin}) + @{borders})"; + &:before { + content: attr(placeholder); + display: inline-block; + margin: 0 ~"calc(@{margin} + @{borders})"; + padding: 0 2px; + color: #00bafa; + font-size: small; + white-space: nowrap; + transition: .3s ease-in-out; + + background-image: linear-gradient(to bottom, #fff, #fff); + background-size: 100% 5px; + background-repeat: no-repeat; + background-position: center; + } + } + } + } +} + +.gab-column-provider-form { + margin: 5px +} + +.gab-column-provider-input { + @height: 2em; + &[type="text"] { + .adaptive_placeholder(@height, (@height / 2)); + } +} + +.gab-column-provider-input.ng-valid[required], .gab-column-provider-input.ng-valid.required { + border-left: 5px solid #42bb48; + border-right: 5px solid #42bb48; +} + +.gab-column-provider-input.ng-invalid:not(form) { + border-left: 5px solid #ff0511; + border-right: 5px solid #ff0511; +}
\ No newline at end of file |