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
  31         /deep/ .tabs {
  32             width:33%;
  33             text-align:center;
  34         }
  35
  36         /deep/ .tab {
  37             padding: 12px;
  38             flex: 1;
  39             font-family: @font-opensans-regular;
  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                 font-family: @font-opensans-medium;
  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                 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                 right:42px;
  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             position: absolute;
 114             top: 0;
 115             right: 0;
 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: 45px 0 0 1em;
 135         overflow-x:auto;
 136
 137         /deep/ .tabs {
 138             border-bottom: solid 1px #d0d0d0;
 139         }
 140
 141         /deep/ .tab {
 142             flex: none;
 143             padding: 8px 20px 0;
 144             font-size: 14px;
 145             line-height:30px;
 146             font-family: @font-opensans-regular;
 147
 148             &.active {
 149                 font-family: @font-opensans-medium;
 150             }
 151         }
 152     }
 153
 154     .hierarchy-tabs {
 155         flex: 0 0 40px;
 156     }
 157
 158     .gray-border {
 159         border: 1px solid #ddd;
 160     }
 161
 162     /deep/ .white-sub-header {
 163         background-color:  #fffefe;
 164         box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
 165         border-bottom: #d2d2d2 solid 1px;
 166         font-size:14px;
 167         text-align:left;
 168         flex:0 0 auto;
 169         padding: 10px;
 170         text-overflow: ellipsis;
 171         white-space: nowrap;
 172         overflow: hidden;
 173         .a_13_r;
 174         text-transform: uppercase;
 175
 176         &.hierarchy-header {
 177             padding-left:20px;
 178             &.selected {
 179                 background-color: #e6f6fb;
 180             }
 181         }
 182
 183     }
 184
 185     .hierarchy-nav-container {
 186         display:flex;
 187         flex-direction: column;
 188         height: 100%;
 189     }
 190
 191     .hierarchy-header {
 192
 193         span{
 194             text-overflow: ellipsis;
 195             overflow: hidden;
 196             white-space: nowrap;
 197             max-width: 290px;
 198         }
 199     }
 200
 201     .hierarchy-nav {
 202         flex:1;
 203         overflow:auto;
 204         display: grid;
 205         margin-top: 1em;
 206         margin-left: 1em;
 207         font-size: 12px;
 208         padding-top: 1em;
 209     }
 210 }
 211