summaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/pages/properties-assignment
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/properties-assignment')
-rw-r--r--catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less362
1 files changed, 190 insertions, 172 deletions
diff --git a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
index a1309aba61..dacc3303f6 100644
--- a/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
+++ b/catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less
@@ -1,5 +1,6 @@
@import '../../../../assets/styles/variables';
@import '../../../../assets/styles/mixins';
+
@ng2-shadow-gray: #f8f8f8;
@ng2-light-gray: #eaeaea;
@ng2-medium-gray: #d2d2d2;
@@ -7,210 +8,227 @@
@ng2-dark-gray: #5a5a5a;
@ng2-shadow-blue: #e6f6fb;
@ng2-bold-blue: #009fdb;
-@ng2-success-green:#4ca90c;
-@ng2-title-font-size:16px;
+@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%; }
+:host {
+ display: block;
+ height: 100%;
+}
+
+/deep/ .tabs {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+}
.properties-assignment-page {
+ height: 100%;
+ font-family: @font-opensans-regular;
+
+ .main-content {
+ display: flex;
+ flex-direction: row;
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;
- .left-column {
- flex: 1 0 500px;
- position: relative;
- min-width:930px;
+ /deep/ .tabs {
+ width: 33%;
+ text-align: center;
+ }
- /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;
+ }
+ }
- /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;
+ }
- .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;
}
- .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;
+ &::-webkit-input-placeholder {
+ color: @ng2-med-dark-gray;
}
-
- .declare-button{
- &:not(:last-of-type) {
- margin-right: 10px;
- }
+ }
+
+ .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;
}
+ }
- .main-tabs-section {
- position: relative;
+ }
- .main-tabs-section-buttons {
- position: absolute;
- top: 45px;
- right: 0;
- padding: 4px;
- }
- }
+ .clear-filter {
+ cursor: pointer;
+ color: #009fdb;
+ font-family: @font-opensans-medium-italic;
+ text-decoration: underline;
+ padding-right: 10px;
+ font-size: 12px;
}
- .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;
- }
+ .declare-button {
+ &:not(:last-of-type) {
+ margin-right: 10px;
+ }
+ }
- /deep/ .tab {
- flex: none;
- padding: 8px 20px 0;
- font-size: 14px;
- line-height:30px;
- font-family: @font-opensans-regular;
+ .main-tabs-section {
+ position: relative;
- &.active {
- font-family: @font-opensans-medium;
- }
- }
+ .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 {
- .hierarchy-tabs {
- flex: 0 0 40px;
+ align-self: flex-end;
+ margin-top: 10px;
+ margin-bottom: 19px;
}
- .gray-border {
- border: 1px solid #ddd;
+ /deep/ .tabs {
+ border-bottom: solid 1px #d0d0d0;
}
- /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;
- }
- }
+ /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-nav-container {
- display:flex;
- flex-direction: column;
- height: 100%;
+ }
+
+ .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-header {
+ }
- span{
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
- max-width: 290px;
- }
- }
+ .hierarchy-nav-container {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ }
- .hierarchy-nav {
- flex:1;
- overflow:auto;
- display: grid;
- margin-top: 1em;
- margin-left: 1em;
- font-size: 12px;
- padding-top: 1em;
+ .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;
+ }
}