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