a1309aba610bd8cc009f6479ebfb0c37ae3c686c
[sdc.git] / catalog-ui / src / app / ng2 / pages / properties-assignment / properties-assignment.page.component.less
1 @import '../../../../assets/styles/variables';
2 @import '../../../../assets/styles/mixins';
3 @ng2-shadow-gray: #f8f8f8;
4 @ng2-light-gray: #eaeaea;
5 @ng2-medium-gray: #d2d2d2;
6 @ng2-med-dark-gray: #999999;
7 @ng2-dark-gray: #5a5a5a;
8 @ng2-shadow-blue: #e6f6fb;
9 @ng2-bold-blue: #009fdb;
10 @ng2-success-green:#4ca90c;
11 @ng2-title-font-size:16px;
12 @ng2-text-font-size: 14px;
13
14 :host { display:block; height: 100%; }
15 /deep/ tabs {display:flex; flex-direction:column; height:100%; }
16
17 .properties-assignment-page {
18     height: 100%;
19     font-family: @font-opensans-regular;
20
21     .main-content {
22         display:flex;
23         flex-direction:row;
24         height: 100%;
25     }
26
27     .left-column {
28         flex: 1 0 500px;
29         position: relative;
30         min-width:930px;
31
32         /deep/ .tabs {
33             width:33%;
34             text-align:center;
35         }
36
37         /deep/ .tab {
38             padding: 12px;
39             flex: 1;
40             font-family: @font-opensans-regular;
41
42             &.active {
43                 color:#009fdb;
44                 border-color: #d2d2d2;
45                 border-top: solid 4px #009fdb;
46                 background-color: white;
47                 padding-top:9px;
48                 font-family: @font-opensans-medium;
49             }
50
51             .tab-indication {
52                 background-color:#4ca90c;
53                 border:solid 2px #fff;
54                 border-radius:50%;
55                 font-size:12px;
56             }
57         }
58
59         .header {
60             position:absolute;
61             top:0;
62             right:0;
63             display: flex;
64         }
65
66         .search-filter-container{
67             display:flex;
68             flex-direction:row;
69
70             .search-box {
71                 border: 1px solid @ng2-medium-gray;
72                 border-radius: 3px;
73                 height: 32px;
74                 margin: 0;
75                 padding: 2px 20px 4px 10px;
76                 outline: none;
77                 font-style: italic;
78                 color:@ng2-med-dark-gray;
79                 width: auto;
80
81                 &::-moz-placeholder { color:@ng2-med-dark-gray;}
82                 &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
83             }
84
85             .search-icon {
86                 background-position: -48px -3137px;
87                 width: 14px;
88                 height: 14px;
89                 position: absolute;
90                 left:170px;
91                 top: 8px;
92             }
93
94             &.without-filter {
95                 margin-right:10px;
96                 .search-icon {
97                     right: 4px;
98                 }
99             }
100
101         }
102         
103         .clear-filter{
104             cursor: pointer;
105             color:#009fdb;
106             font-family: @font-opensans-medium-italic;
107             text-decoration: underline;
108             padding-right:10px;
109             font-size:12px;
110         }
111
112         .declare-button{
113             &:not(:last-of-type) {
114                 margin-right: 10px;
115             }
116         }
117
118         .main-tabs-section {
119             position: relative;
120
121             .main-tabs-section-buttons {
122                 position: absolute;
123                 top: 45px;
124                 right: 0;
125                 padding: 4px;
126             }
127         }
128     }
129
130     .right-column {
131         display:flex;
132         flex:0 0 350px;
133         flex-direction:column;
134         margin: 0px 0 0 1em;
135         overflow-x:auto;
136         .add-btn{
137
138             align-self: flex-end;
139             margin-top: 10px;
140             margin-bottom: 19px;
141         }
142         /deep/ .tabs {
143             border-bottom: solid 1px #d0d0d0;
144         }
145
146         /deep/ .tab {
147             flex: none;
148             padding: 8px 20px 0;
149             font-size: 14px;
150             line-height:30px;
151             font-family: @font-opensans-regular;
152
153             &.active {
154                 font-family: @font-opensans-medium;
155             }
156         }
157     }
158
159     .hierarchy-tabs {
160         flex: 0 0 40px;
161     }
162
163     .gray-border {
164         border: 1px solid #ddd;
165     }
166
167     /deep/ .white-sub-header {
168         background-color:  #fffefe;
169         box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
170         border-bottom: #d2d2d2 solid 1px;
171         font-size:14px;
172         text-align:left;
173         flex:0 0 auto;
174         padding: 10px;
175         text-overflow: ellipsis;
176         white-space: nowrap;
177         overflow: hidden;
178         .a_13_r;
179         text-transform: uppercase;
180
181         &.hierarchy-header {
182             padding-left:20px;
183             &.selected {
184                 background-color: #e6f6fb;
185             }
186         }
187
188     }
189
190     .hierarchy-nav-container {
191         display:flex;
192         flex-direction: column;
193         height: 100%;
194     }
195
196     .hierarchy-header {
197
198         span{
199             text-overflow: ellipsis;
200             overflow: hidden;
201             white-space: nowrap;
202             max-width: 290px;
203         }
204     }
205
206     .hierarchy-nav {
207         flex:1;
208         overflow:auto;
209         display: grid;
210         margin-top: 1em;
211         margin-left: 1em;
212         font-size: 12px;
213         padding-top: 1em;
214     }
215 }
216