diff --git a/awx/ui/client/lib/components/input/_index.less b/awx/ui/client/lib/components/input/_index.less index 4867ea2242..6c41607a27 100644 --- a/awx/ui/client/lib/components/input/_index.less +++ b/awx/ui/client/lib/components/input/_index.less @@ -221,6 +221,32 @@ padding: 6px @at-padding-input 0 @at-padding-input; } +.at-InputLookup { + display: flex; + + .at-InputLookup-button { + .at-mixin-InputButton(); + border-radius: @at-border-radius 0 0 @at-border-radius; + border-right: none; + flex: 0 0 35px; + height: auto; + min-height: 30px + } + + .at-InputLookup-tagContainer { + .at-mixin-Border; + display: flex; + flex-flow: row wrap; + padding: 0 10px; + width: 100%; + } + + .at-InputLookup-button + .at-Input, + .at-InputLookup-tagContainer { + border-radius: 0 @at-border-radius @at-border-radius 0; + } +} + .at-InputSlider { display: flex; padding: 5px 0; diff --git a/awx/ui/client/lib/components/input/lookup.partial.html b/awx/ui/client/lib/components/input/lookup.partial.html index 88cd218e9c..4d354ab462 100644 --- a/awx/ui/client/lib/components/input/lookup.partial.html +++ b/awx/ui/client/lib/components/input/lookup.partial.html @@ -2,14 +2,12 @@
-
- - - +
+ -
diff --git a/awx/ui/client/lib/theme/_mixins.less b/awx/ui/client/lib/theme/_mixins.less index a3aa4ef1df..3c3f0c66a5 100644 --- a/awx/ui/client/lib/theme/_mixins.less +++ b/awx/ui/client/lib/theme/_mixins.less @@ -20,6 +20,12 @@ padding: 0; } +.at-mixin-Border (@color: @at-border-default-color) { + border-width: @at-border-default-width; + border-style: @at-border-default-style; + border-color: @color +} + .at-mixin-Button () { border-radius: @at-border-radius; height: @at-height-input; diff --git a/awx/ui/client/lib/theme/_variables.less b/awx/ui/client/lib/theme/_variables.less index 3317148e4f..5acf3419cb 100644 --- a/awx/ui/client/lib/theme/_variables.less +++ b/awx/ui/client/lib/theme/_variables.less @@ -316,6 +316,10 @@ // 5. Misc ---------------------------------------------------------------------------------------- @at-border-radius: 5px; +@at-border-default-style: solid; +@at-border-default-width: 1px; +@at-border-default-color: @at-gray-b7; +@at-border-style-list-active-indicator: 5px solid @at-color-info; @at-popover-maxwidth: 320px; @at-line-height-short: 0.9; @at-line-height-tall: 2; @@ -325,8 +329,6 @@ @at-z-index-nav: 1040; @at-z-index-side-nav: 1030; @at-z-index-footer: 1020; -@at-border-default-width: 1px; -@at-border-style-list-active-indicator: 5px solid @at-color-info; @at-line-height-list-row-item-tag: 22px; // 6. Breakpoints ---------------------------------------------------------------------------------