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             display: flex;
  63         }
  64
  65         .search-filter-container{
  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                 width: auto;
  79
  80                 &::-moz-placeholder { color:@ng2-med-dark-gray;}
  81                 &::-webkit-input-placeholder{ color:@ng2-med-dark-gray;}
  82             }
  83
  84             .search-icon {
  85                 background-position: -48px -3137px;
  86                 width: 14px;
  87                 height: 14px;
  88                 position: absolute;
  89                 left:170px;
  90                 top: 8px;
  91             }
  92
  93             &.without-filter {
  94                 margin-right:10px;
  95                 .search-icon {
  96                     right: 4px;
  97                 }
  98             }
  99
 100         }
 101
 102         .clear-filter{
 103             cursor: pointer;
 104             color:#009fdb;
 105             font-family: @font-opensans-medium-italic;
 106             text-decoration: underline;
 107             padding-right:10px;
 108             font-size:12px;
 109         }
 110
 111         .declare-button{
 112             &:not(:last-of-type) {
 113                 margin-right: 10px;
 114             }
 115         }
 116
 117         .main-tabs-section {
 118             position: relative;
 119
 120             .main-tabs-section-buttons {
 121                 position: absolute;
 122                 top: 45px;
 123                 right: 0;
 124                 padding: 4px;
 125             }
 126         }
 127     }
 128
 129     .right-column {
 130         display:flex;
 131         flex:0 0 350px;
 132         flex-direction:column;
 133         margin: 0px 0 0 1em;
 134         overflow-x:auto;
 135          .add-btn{
 136
 137             align-self: flex-end;
 138             margin-top: 10px;
 139             margin-bottom: 19px;
 140         }
 141
 142         /deep/ .tabs {
 143             border-bottom: solid 1px #d0d0d0;
 144         }
 145
 146         /deep/ .tab {
 147             flex: none;
 148             padding: 8px 20px 0;
 149             font-size: 14px;
 150             line-height:30px;
 151             font-family: @font-opensans-regular;
 152
 153             &.active {
 154                 font-family: @font-opensans-medium;
 155             }
 156         }
 157     }
 158
 159     .hierarchy-tabs {
 160         flex: 0 0 40px;
 161     }
 162
 163     .gray-border {
 164         border: 1px solid #ddd;
 165     }
 166
 167     /deep/ .white-sub-header {
 168         background-color:  #fffefe;
 169         box-shadow: 0px 1px 0.99px 0.01px rgba(34, 31, 31, 0.15);
 170         border-bottom: #d2d2d2 solid 1px;
 171         font-size:14px;
 172         text-align:left;
 173         flex:0 0 auto;
 174         padding: 10px;
 175         text-overflow: ellipsis;
 176         white-space: nowrap;
 177         overflow: hidden;
 178         .a_13_r;
 179         text-transform: uppercase;
 180
 181         &.hierarchy-header {
 182             padding-left:20px;
 183             &.selected {
 184                 background-color: #e6f6fb;
 185             }
 186         }
 187
 188     }
 189
 190     .hierarchy-nav-container {
 191         display:flex;
 192         flex-direction: column;
 193         height: 100%;
 194     }
 195
 196     .hierarchy-header {
 197
 198         span{
 199             text-overflow: ellipsis;
 200             overflow: hidden;
 201             white-space: nowrap;
 202             max-width: 290px;
 203         }
 204     }
 205
 206     .hierarchy-nav {
 207         flex:1;
 208         overflow:auto;
 209         display: grid;
 210         margin-top: 1em;
 211         margin-left: 1em;
 212         font-size: 12px;
 213         padding-top: 1em;
 214     }
 215 }
 216