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