catalog-ui/src/app/ng2/pages/properties-assignment/properties-assignment.page.component.less

   1 @import '../../../../assets/styles/variables';
   2 //@import url('https://fonts.googleapis.com/css?family=Open+Sans');
   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: 'Open Sans', omnes-regular, sans-serif;
  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         margin: 0 0 1em 0;
  31
  32         /deep/ .tabs {
  33             width:33%;
  34             text-align:center;
  35         }
  36
  37         /deep/ .tab {
  38             padding: 12px;
  39             flex: 1;
  40             font-weight:bold;
  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             }
  49
  50             .tab-indication {
  51                 background-color:#4ca90c;
  52                 border:solid 2px #fff;
  53                 border-radius:50%;
  54                 font-size:12px;
  55             }
  56         }
  57
  58         .header {
  59             position:absolute;
  60             top:0;
  61             right:0;
  62         }
  63
  64         .search-filter-container{
  65             position: absolute;
  66             right: 100px;
  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
  80                 &::-moz-placeholder { color:@ng2-med-dark-gray;}
  81                 &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
  82             }
  83
  84             .search-icon {
  85                 background-position: -48px -3137px;
  86                 width: 14px;
  87                 height: 14px;
  88                 position: absolute;
  89                 right:42px;
  90                 top: 8px;
  91             }
  92
  93             &.without-filter {
  94                 margin-right:10px;
  95                 .search-icon {
  96                     right: 4px;
  97                 }
  98             }
  99
 100         }
 101         .advance-search{
 102
 103         }
 104         .clear-filter{
 105             cursor: pointer;
 106             color: @main_color_c;
 107             font-family: @font-omnes-medium-italic;
 108             text-decoration: underline;
 109             position: relative;
 110             top: 4px;
 111             right: 16px;
 112         }
 113
 114         .declare-button{
 115             position: absolute;
 116             top: 0;
 117             right: 0;
 118         }
 119     }
 120
 121     .right-column {
 122         display:flex;
 123         flex:0 0 350px;
 124         flex-direction:column;
 125         margin: 45px 0 1em 1em;
 126         overflow-x:auto;
 127
 128         /deep/ .tabs {
 129             border-bottom: solid 1px #d0d0d0;
 130         }
 131
 132         /deep/ .tab {
 133             flex: none;
 134             padding: 8px 20px 0;
 135             font-size: 14px;
 136             font-weight:bold;
 137             line-height:30px;
 138         }
 139     }
 140
 141     .hierarchy-tabs {
 142         flex: 0 0 40px;
 143     }
 144
 145     .gray-border {
 146         border: 1px solid #ddd;
 147     }
 148
 149     /deep/ .white-sub-header {
 150         background-color:  #fffefe;
 151         box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
 152         border-bottom: #d2d2d2 solid 1px;
 153         color:#009fdb;
 154         font-weight:bold;
 155         font-size:14px;
 156         text-align:left;
 157         flex:0 0 auto;
 158         padding: 10px;
 159         text-overflow: ellipsis;
 160         white-space: nowrap;
 161         overflow: hidden;
 162
 163         &.hierarchy-header {
 164             padding-left:20px;
 165             &.selected {
 166                 background-color: #e6f6fb;
 167             }
 168         }
 169
 170     }
 171
 172     .hierarchy-nav-container {
 173         flex:1;
 174         overflow: auto;
 175         flex-direction: column;
 176         height: 100%;
 177     }
 178
 179     .hierarchy-header {
 180
 181         span{
 182             text-overflow: ellipsis;
 183             overflow: hidden;
 184             white-space: nowrap;
 185             max-width: 290px;
 186         }
 187     }
 188
 189     .hierarchy-nav {
 190         display: grid;
 191         margin-top: 1em;
 192         margin-left: 1em;
 193         font-size: 12px;
 194         padding-top: 1em;
 195     }
 196 }
 197