skyquake/plugins/project_management/src/dashboard/projectMgmt.scss

   1 /*
   2  * STANDARD_RIFT_IO_COPYRIGHT
   3  */
   4
   5 /* If there's time this really needs to be rewritten. Ideally with smooth animations.*/
   6 @import "style/_colors.scss";
   7
   8 .projectManagement {
   9         max-width: 1200px;
  10
  11     .skyquakePanel-wrapper {
  12         overflow-x: hidden;
  13     }
  14     .projectList {
  15
  16         -ms-flex: 0 1 200px;
  17         flex: 0 1 200px;
  18
  19         .activeUser {
  20             font-weight:bold;
  21         }
  22
  23         /* transition: all 2s;*/
  24         &.expanded {
  25             -ms-flex: 1 1 100%;
  26             flex: 1 1 100%;
  27             /* transition: all 300ms;*/
  28             .tableRow>div:not(.projectName) {
  29                 opacity: 1;
  30                 /* width:auto;*/
  31                 /* transition: width 600ms;*/
  32                 /* transition: opacity 300ms;*/
  33             }
  34             &.collapsed {
  35                 -ms-flex: 0 1 200px;
  36                 flex: 0 1 200px;
  37                 /* transition: all 2s;*/
  38                 .tableRow>div:not(.projectName) {
  39                     /* opacity: 0;*/
  40                     /* width:0px;*/
  41                     display:none;
  42                     overflow:hidden;
  43                     /* transition: all 600ms;*/
  44                 }
  45             }
  46         }
  47         &.hideColumns {
  48             overflow:hidden;
  49             >div {
  50                 overflow:hidden;
  51             }
  52             .tableRow>div:not(.projectName) {
  53                 width: 0px;
  54                 /* transition: all 600ms;*/
  55             }
  56             .projectName {
  57                 &--header {
  58                     /* display:none;*/
  59              }
  60             }
  61         }
  62         .projectName {
  63             cursor:pointer;
  64         }
  65
  66
  67     }
  68
  69     .projectAdmin {
  70             -ms-flex: 1 1;
  71             flex: 1 1;
  72             width:auto;
  73             opacity:1;
  74
  75         textarea{
  76             height: 100px;
  77         }
  78     }
  79     &.projectList-open {
  80         .projectAdmin {
  81             -ms-flex: 0 1 0px;
  82                 flex: 0 1 0px;
  83             opacity:0;
  84             /* width: 0px;*/
  85             display:none;
  86             /* transition: opacity 300ms;*/
  87             /* transition: width 600ms;*/
  88
  89         }
  90     }
  91     .rbacButtonGroup {
  92         margin: 0 0.5rem 0.5rem;
  93         background: #ddd;
  94         padding-bottom: 0.5rem;
  95         padding: 0.5rem 0;
  96     }
  97     .buttonGroup {
  98         border-top: #d3d3d3 1px solid;
  99         padding-top:0.5rem;
 100     }
 101     .addUser {
 102         display:-ms-flexbox;
 103         display:flex;
 104         -ms-flex-direction:row;
 105             flex-direction:row;
 106         label {
 107             -ms-flex: 0 1;
 108                 flex: 0 1;
 109                 width:150px;
 110             select {
 111                 width:150px;
 112             }
 113         }
 114     }
 115     .projectUsers {
 116         .userName {
 117             -ms-flex-pack: start;
 118             justify-content: flex-start;
 119             padding-top: 0.75rem;
 120         }
 121         select {
 122             margin-bottom:0.5rem;
 123         }
 124         .addRole {
 125             margin:.25rem 0;
 126         }
 127         .buttonGroup {
 128             display:-ms-flexbox;
 129             display:flex;
 130         }
 131
 132     }
 133     .projectUsers.tableRow--data:hover {
 134             background:none;
 135             color: black;
 136         }
 137
 138     table {
 139         font-size: 0.8rem;
 140         thead {
 141             border-bottom:1px solid #d3d3d3;
 142             td{
 143                 font-weight:bold;
 144             }
 145         }
 146         td{
 147             padding:0.25rem 0.5rem;
 148             vertical-align: middle;
 149             .checkbox {
 150                 -ms-flex-pack:center;
 151                     justify-content:center;
 152             }
 153         }
 154         tbody tr {
 155             &:nth-child(even) {
 156                 background:$neutral-dark-0;
 157             }
 158         }
 159     }
 160     .userTable {
 161         .FormSection-body {
 162             max-width: 952px;
 163             overflow-x: auto;
 164         }
 165     }
 166 }
 167
 168
 169
 170 .FormSection {
 171     &-title {
 172         color: #000;
 173         background: lightgray;
 174         padding: 0.5rem;
 175         border-top: 1px solid #f1f1f1;
 176         border-bottom: 1px solid #f1f1f1;
 177     }
 178     &-body {
 179         padding: 0.5rem 0.75rem;
 180     }
 181     label {
 182         -ms-flex: 1 0;
 183             flex: 1 0;
 184     }
 185     /* label {*/
 186     /*     display: -ms-flexbox;*/
 187     /*     display: flex;*/
 188     /*     -ms-flex-direction: column;*/
 189     /*     flex-direction: column;*/
 190     /*     width: 100%;*/
 191     /*     margin: 0.5rem 0;*/
 192     /*     -ms-flex-align: start;*/
 193     /*     align-items: flex-start;*/
 194     /*     -ms-flex-pack: start;*/
 195     /*     justify-content: flex-start;*/
 196     /* }*/
 197     select {
 198         font-size: 1rem;
 199         min-width: 75%;
 200         height: 35px;
 201     }
 202 }
 203
 204
 205 .InputCollection {
 206     display:-ms-flexbox;
 207     display:flex;
 208     -ms-flex-wrap: nowrap;
 209         flex-wrap: nowrap;
 210     -ms-flex-align: center;
 211         align-items: center;
 212     button {
 213         padding: 0.25rem;
 214         height: 1.5rem;
 215         font-size: 0.75rem;
 216     }
 217     select {
 218         min-width: 100%;
 219     }
 220     margin-bottom:0.5rem;
 221     &-wrapper {
 222
 223     }
 224 }
 225 .tableRow {
 226     display:-ms-flexbox;
 227     display:flex;
 228     -ms-flex-wrap: nowrap;
 229     flex-wrap: nowrap;
 230     padding: 0.25rem;
 231     margin: .125rem 0;
 232     >div {
 233         padding: 0.25rem;
 234         -ms-flex: 1 1 33%;
 235             flex: 1 1 33%;
 236         display: -ms-flexbox;
 237         display: flex;
 238         -ms-flex-direction: column;
 239             flex-direction: column;
 240         -ms-flex-pack: center;
 241             justify-content: center;
 242     }
 243     &--header {
 244         font-weight:bold;
 245     }
 246     &--data {
 247         &:nth-child(even) {
 248             background:$neutral-dark-0;
 249         }
 250         &:hover:not(&-active) {
 251             background:$neutral-dark-1;
 252         }
 253         &:hover, .activeUser, &-active{
 254             cursor:pointer;
 255             color:white;
 256         }
 257         .activeUser, &-active{
 258             background: #00acee;
 259         }
 260     }
 261 }
 262
 263 .addInput, .removeInput {
 264     display:-ms-flexbox;
 265     display:flex;
 266     -ms-flex-align:center;
 267     align-items:center;
 268     margin-left: 1rem;
 269
 270     font-size:0.75rem;
 271     text-transform:uppercase;
 272     font-weight:bold;
 273
 274     cursor:pointer;
 275     img {
 276         height:0.75rem;
 277         margin-right:0.5rem;
 278         width:auto;
 279     }
 280     span {
 281         color: #5b5b5b;
 282         text-transform: uppercase;
 283     }
 284 }