diff options
author | Tomasz Golabek <tomasz.golabek@nokia.com> | 2019-04-09 12:39:08 +0200 |
---|---|---|
committer | Ofir Sonsino <ofir.sonsino@intl.att.com> | 2019-04-30 10:16:37 +0000 |
commit | ffd70b436f496416535984d6cfe71e10757ec254 (patch) | |
tree | 0f4754191cf4ef0db58070feb67b42acdf10a1d3 /catalog-ui/src/app/ng2/components/logic/generic-artifact-browser/generic-artifact-browser-column-provider.component.less | |
parent | cd5da806dad48bfabd2de5ae56018483dab6106f (diff) |
Dynamic columns in GAB table
Possibility to add and remove new columns in GAB table.
Currently additional columns are not stored anywhere.
Change-Id: Idc204ef3da5be8f9509289461165e22d4c0068bf
Issue-ID: SDC-2229
Signed-off-by: Tomasz Golabek <tomasz.golabek@nokia.com>
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 |