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

   1 @import '../../../../assets/styles/variables';
   2 @ng2-shadow-gray: #f8f8f8;
   3 @ng2-light-gray: #eaeaea;
   4 @ng2-medium-gray: #d2d2d2;
   5 @ng2-med-dark-gray: #999999;
   6 @ng2-dark-gray: #5a5a5a;
   7 @ng2-shadow-blue: #e6f6fb;
   8 @ng2-bold-blue: #009fdb;
   9 @ng2-success-green:#4ca90c;
  10 @ng2-title-font-size:16px;
  11 @ng2-text-font-size: 14px;
  12
  13 :host { display:block; height: 100%; }
  14 /deep/ tabs {display:flex; flex-direction:column; height:100%; }
  15
  16 .properties-assignment-page {
  17     height: 100%;
  18
  19     .main-content {
  20         display:flex;
  21         flex-direction:row;
  22         height: 100%;
  23     }
  24
  25     .left-column {
  26         flex: 1 0 500px;
  27         position: relative;
  28         margin: 0 0 1em 0;
  29
  30         /deep/ .tabs {
  31             width:25%;
  32             text-align:center;
  33
  34         }
  35
  36         /deep/ .tab {
  37             padding: 10px .5em;
  38
  39             &.active {
  40                 color:#009fdb;
  41                 border-color: #d2d2d2;
  42                 border-top: solid 4px #009fdb;
  43                 background-color: white;
  44                 padding-top:7px;
  45             }
  46         }
  47
  48         .header {
  49             position:absolute;
  50             top:0;
  51             right:0;
  52             min-width:200px;
  53         }
  54
  55         .search-filter-container{
  56             position: relative;
  57             right: 164px;
  58         }
  59
  60         .search-box {
  61             border: 1px solid @ng2-medium-gray;
  62             border-radius: 4px;
  63             height: 32px;
  64             margin: 0;
  65             padding: 2px 20px 4px 10px;
  66             outline: none;
  67             font-style: italic;
  68             color:@ng2-med-dark-gray;
  69             margin-right:10px;
  70
  71             &::-moz-placeholder { color:@ng2-med-dark-gray;}
  72             &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
  73         }
  74         .search-icon {
  75             background-position: -48px -3137px;
  76             width: 14px;
  77             height: 14px;
  78             position: relative;
  79             right: 34px;
  80             top: 4px;
  81         }
  82         .advance-search{
  83             position: relative;
  84             right: 22px;
  85         }
  86         .clear-filter{
  87             cursor: pointer;
  88             color: @main_color_c;
  89             font-family: @font-omnes-medium-italic;
  90             text-decoration: underline;
  91             position: relative;
  92             top: 4px;
  93             right: 16px;
  94         }
  95
  96         .declare-button{
  97             position: absolute;
  98             top: 0;
  99             right: 0;
 100         }
 101     }
 102
 103     .right-column {
 104         display:flex;
 105         flex:0 0 350px;
 106         flex-direction:column;
 107         margin: 3em 0 1em 1em;
 108         padding: 10px;
 109         overflow:auto;
 110
 111         /deep/ .tabs {
 112             width: 33%;
 113         }
 114
 115         /deep/ .tab {
 116             padding: 0.5em 1em 0 1em;
 117             white-space: nowrap;
 118             font-size: 13px;
 119         }
 120     }
 121
 122     .hierarchy-tabs {
 123         flex: 0 0 40px;
 124     }
 125
 126     .gray-border {
 127         border: 1px solid #ddd;
 128     }
 129
 130
 131     .hierarchy-nav-container {
 132         flex:1;
 133         overflow: auto;
 134         flex-direction: column;
 135         height: 100%;
 136     }
 137
 138     .hierarchy-header {
 139         height:30px;
 140         line-height: 2.5em;
 141         display: flex;
 142         width: 100%;
 143         padding-left: 14px;
 144         font-weight: bold;
 145         text-align: left;
 146         background-color: @ng2-light-gray;
 147         font-size: 13px;
 148         span{
 149             text-overflow: ellipsis;
 150             overflow: hidden;
 151             white-space: nowrap;
 152             max-width: 290px;
 153         }
 154     }
 155
 156     .hierarchy-nav {
 157         display: grid;
 158         margin-top: 1em;
 159         margin-left: 1em;
 160         font-size: 12px;
 161         padding-top: 1em;
 162     }
 163 }
 164