diff options
author | vasraz <vasyl.razinkov@est.tech> | 2021-02-16 17:37:57 +0000 |
---|---|---|
committer | Christophe Closset <christophe.closset@intl.att.com> | 2021-02-17 15:57:55 +0000 |
commit | 26e5029d922779fd7e786c1a31b6b37492132388 (patch) | |
tree | 8e8e68a6913749e1405fce951bc7816d4fa35ba3 /catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less | |
parent | f2c0a4118c3c0b6360b639622766543bd754b59c (diff) |
Implement Attributes/Outputs FE
Change-Id: I014bb0ebc07f3fea4266a4f295172eadee546705
Signed-off-by: Vasyl Razinkov <vasyl.razinkov@est.tech>
Issue-ID: SDC-3448
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less')
-rw-r--r-- | catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less | 234 |
1 files changed, 234 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less new file mode 100644 index 0000000000..386d243976 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/attributes-outputs/attributes-outputs.page.component.less @@ -0,0 +1,234 @@ +@import '../../../../assets/styles/variables'; +@import '../../../../assets/styles/mixins'; + +@ng2-shadow-gray: #f8f8f8; +@ng2-light-gray: #eaeaea; +@ng2-medium-gray: #d2d2d2; +@ng2-med-dark-gray: #999999; +@ng2-dark-gray: #5a5a5a; +@ng2-shadow-blue: #e6f6fb; +@ng2-bold-blue: #009fdb; +@ng2-success-green: #4ca90c; +@ng2-title-font-size: 16px; +@ng2-text-font-size: 14px; + +:host { + display: block; + height: 100%; +} + +/deep/ tabs { + display: flex; + flex-direction: column; + height: 100%; +} + +.attributes-outputs-page { + height: 100%; + font-family: @font-opensans-regular; + + .main-content { + display: flex; + flex-direction: row; + height: 100%; + } + + .left-column { + flex: 1 0 500px; + position: relative; + min-width: 930px; + + /deep/ .tabs { + width: 33%; + text-align: center; + } + + /deep/ .tab { + padding: 12px; + flex: 1; + font-family: @font-opensans-regular; + + &.active { + color: #009fdb; + border-color: #d2d2d2; + border-top: solid 4px #009fdb; + background-color: white; + padding-top: 9px; + font-family: @font-opensans-medium; + } + + .tab-indication { + background-color: #4ca90c; + border: solid 2px #fff; + border-radius: 50%; + font-size: 12px; + } + } + + .header { + position: absolute; + top: 0; + right: 0; + display: flex; + } + + .search-filter-container { + display: flex; + flex-direction: row; + + .search-box { + border: 1px solid @ng2-medium-gray; + border-radius: 3px; + height: 32px; + margin: 0; + padding: 2px 20px 4px 10px; + outline: none; + font-style: italic; + color: @ng2-med-dark-gray; + width: auto; + + &::-moz-placeholder { + color: @ng2-med-dark-gray; + } + + &::-webkit-input-placeholder { + color: @ng2-med-dark-gray; + } + } + + .search-icon { + background-position: -48px -3137px; + width: 14px; + height: 14px; + position: absolute; + left: 170px; + top: 8px; + } + + &.without-filter { + margin-right: 10px; + + .search-icon { + right: 4px; + } + } + + } + + .clear-filter { + cursor: pointer; + color: #009fdb; + font-family: @font-opensans-medium-italic; + text-decoration: underline; + padding-right: 10px; + font-size: 12px; + } + + .declare-button { + &:not(:last-of-type) { + margin-right: 10px; + } + } + + .main-tabs-section { + position: relative; + + .main-tabs-section-buttons { + position: absolute; + top: 45px; + right: 0; + padding: 4px; + } + } + } + + .right-column { + display: flex; + flex: 0 0 350px; + flex-direction: column; + margin: 0px 0 0 1em; + overflow-x: auto; + + .add-btn { + + align-self: flex-end; + margin-top: 10px; + margin-bottom: 19px; + } + + /deep/ .tabs { + border-bottom: solid 1px #d0d0d0; + } + + /deep/ .tab { + flex: none; + padding: 8px 20px 0; + font-size: 14px; + line-height: 30px; + font-family: @font-opensans-regular; + + &.active { + font-family: @font-opensans-medium; + } + } + } + + .hierarchy-tabs { + flex: 0 0 40px; + } + + .gray-border { + border: 1px solid #ddd; + } + + /deep/ .white-sub-header { + background-color: #fffefe; + box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15); + border-bottom: #d2d2d2 solid 1px; + font-size: 14px; + text-align: left; + flex: 0 0 auto; + padding: 10px; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + .a_13_r; + text-transform: uppercase; + + &.hierarchy-header { + padding-left: 20px; + + &.selected { + background-color: #e6f6fb; + } + } + + } + + .hierarchy-nav-container { + display: flex; + flex-direction: column; + height: 100%; + } + + .hierarchy-header { + + span { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 290px; + } + } + + .hierarchy-nav { + flex: 1; + overflow: auto; + display: grid; + margin-top: 1em; + margin-left: 1em; + font-size: 12px; + padding-top: 1em; + } +} + |