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