skyquake/plugins/user_management/src/platformRoleManagement/platformRoleManagement.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: 900px;
  10
  11     .skyquakePanel-wrapper {
  12         overflow-x: hidden;
  13     }
  14     .projectList {
  15
  16         -ms-flex: 0 1 200px;
  17         -webkit-box-flex: 0;
  18                 flex: 0 1 200px;
  19
  20         .activeUser {
  21             font-weight:bold;
  22         }
  23
  24         /* transition: all 2s;*/
  25         &.expanded {
  26             -ms-flex: 1 1 100%;
  27             -webkit-box-flex: 1;
  28                     flex: 1 1 100%;
  29             /* transition: all 300ms;*/
  30             .tableRow>div:not(.projectName) {
  31                 opacity: 1;
  32                 /* width:auto;*/
  33                 /* transition: width 600ms;*/
  34                 /* transition: opacity 300ms;*/
  35             }
  36             &.collapsed {
  37                 -ms-flex: 0 1 200px;
  38                 -webkit-box-flex: 0;
  39                         flex: 0 1 200px;
  40                 /* transition: all 2s;*/
  41                 .tableRow>div:not(.projectName) {
  42                     /* opacity: 0;*/
  43                     /* width:0px;*/
  44                     display:none;
  45                     overflow:hidden;
  46                     /* transition: all 600ms;*/
  47                 }
  48             }
  49         }
  50         &.hideColumns {
  51             overflow:hidden;
  52             >div {
  53                 overflow:hidden;
  54             }
  55             .tableRow>div:not(.projectName) {
  56                 width: 0px;
  57                 /* transition: all 600ms;*/
  58             }
  59             .projectName {
  60                 &--header {
  61                     /* display:none;*/
  62              }
  63             }
  64         }
  65         .projectName {
  66             cursor:pointer;
  67         }
  68
  69
  70     }
  71
  72     .projectAdmin {
  73             -ms-flex: 1 1;
  74             -webkit-box-flex: 1;
  75                     flex: 1 1;
  76             width:auto;
  77             opacity:1;
  78
  79         textarea{
  80             height: 100px;
  81         }
  82     }
  83     &.projectList-open {
  84         .projectAdmin {
  85             -ms-flex: 0 1 0px;
  86                 -webkit-box-flex: 0;
  87                     flex: 0 1 0px;
  88             opacity:0;
  89             /* width: 0px;*/
  90             display:none;
  91             /* transition: opacity 300ms;*/
  92             /* transition: width 600ms;*/
  93
  94         }
  95     }
  96     .buttonGroup {
  97         margin: 0 0.5rem 0.5rem;
  98         background: #ddd;
  99         padding-bottom: 0.5rem;
 100         padding: 0.5rem 0;
 101         border-top: #d3d3d3 1px solid;
 102     }
 103     .addUser {
 104         display:-ms-flexbox;
 105         display:-webkit-box;
 106         display:flex;
 107         -ms-flex-direction:row;
 108             -webkit-box-orient:horizontal;
 109             -webkit-box-direction:normal;
 110                 flex-direction:row;
 111         label {
 112             -webkit-box-orient: vertical;
 113             -webkit-box-direction: normal;
 114                 -ms-flex-direction: column;
 115                     flex-direction: column;
 116             display: -webkit-box;
 117             display: -ms-flexbox;
 118             display: flex;
 119             -ms-flex: 0 1;
 120             -webkit-box-flex: 0;
 121                 flex: 0 1;
 122
 123             width:150px;
 124             span {
 125                 margin-bottom: 0.5rem;
 126             }
 127             span:nth-child(2) {
 128                 -webkit-box-align: center;
 129                     -ms-flex-align: center;
 130                         align-items: center;
 131                 -webkit-box-flex: 1;
 132                     -ms-flex: 1;
 133                         flex: 1;
 134                 display: -webkit-box;
 135                 display: -ms-flexbox;
 136                 display: flex;
 137             }
 138
 139             margin-right: 1rem;
 140             select {
 141                 width:150px;
 142             }
 143         }
 144         .noUsersAvailable {
 145             display:-webkit-box;
 146             display:-ms-flexbox;
 147             display:flex;
 148             -webkit-box-align: start;
 149                 -ms-flex-align: start;
 150                     align-items: flex-start;
 151             margin-bottom: 0.75rem;
 152             -webkit-box-flex: 1;
 153                 -ms-flex: 1;
 154                     flex: 1;
 155             div {
 156                 width:260px;
 157                 margin-bottom: 0.5rem;
 158             }
 159         }
 160     }
 161     .projectUsers {
 162         .userName {
 163             -ms-flex-pack: start;
 164             -webkit-box-pack: start;
 165                     justify-content: flex-start;
 166             padding-top: 0.75rem;
 167         }
 168         select {
 169             margin-bottom:0.5rem;
 170         }
 171         .addRole {
 172             margin:.25rem 0;
 173         }
 174         .buttonGroup {
 175             display:-ms-flexbox;
 176             display:-webkit-box;
 177             display:flex;
 178         }
 179
 180     }
 181     .projectUsers.tableRow--data:hover {
 182             background:none;
 183             color: black;
 184         }
 185
 186     table {
 187         thead {
 188             border-bottom:1px solid #d3d3d3;
 189             td{
 190                 font-weight:bold;
 191             }
 192         }
 193         td{
 194             padding:0.25rem 0.5rem;
 195             vertical-align: middle;
 196             .checkbox {
 197                 -ms-flex-pack:center;
 198                     -webkit-box-pack:center;
 199                         justify-content:center;
 200             }
 201         }
 202         tbody tr {
 203             &:nth-child(even) {
 204                 background:$neutral-dark-0;
 205             }
 206         }
 207     }
 208 }
 209
 210
 211
 212 .FormSection {
 213     &-title {
 214         color: #000;
 215         background: lightgray;
 216         padding: 0.5rem;
 217         border-top: 1px solid #f1f1f1;
 218         border-bottom: 1px solid #f1f1f1;
 219     }
 220     &-body {
 221         padding: 0.5rem 0.75rem;
 222     }
 223     label {
 224         -ms-flex: 1 0;
 225             -webkit-box-flex: 1;
 226                 flex: 1 0;
 227     }
 228     /* label {*/
 229     /*     display: -ms-flexbox;*/
 230     /*     display: flex;*/
 231     /*     -ms-flex-direction: column;*/
 232     /*     flex-direction: column;*/
 233     /*     width: 100%;*/
 234     /*     margin: 0.5rem 0;*/
 235     /*     -ms-flex-align: start;*/
 236     /*     align-items: flex-start;*/
 237     /*     -ms-flex-pack: start;*/
 238     /*     justify-content: flex-start;*/
 239     /* }*/
 240     select {
 241         font-size: 1rem;
 242         min-width: 75%;
 243         height: 35px;
 244     }
 245 }
 246
 247
 248 .InputCollection {
 249     display:-ms-flexbox;
 250     display:-webkit-box;
 251     display:flex;
 252     -ms-flex-wrap: nowrap;
 253         flex-wrap: nowrap;
 254     -ms-flex-align: center;
 255         -webkit-box-align: center;
 256             align-items: center;
 257     button {
 258         padding: 0.25rem;
 259         height: 1.5rem;
 260         font-size: 0.75rem;
 261     }
 262     select {
 263         min-width: 100%;
 264     }
 265     margin-bottom:0.5rem;
 266     &-wrapper {
 267
 268     }
 269 }
 270 .tableRow {
 271     display:-ms-flexbox;
 272     display:-webkit-box;
 273     display:flex;
 274     -ms-flex-wrap: nowrap;
 275     flex-wrap: nowrap;
 276     padding: 0.25rem;
 277     >div {
 278         padding: 0.25rem;
 279         -ms-flex: 1 1 33%;
 280             -webkit-box-flex: 1;
 281                 flex: 1 1 33%;
 282         display: -ms-flexbox;
 283         display: -webkit-box;
 284         display: flex;
 285         -ms-flex-direction: column;
 286             -webkit-box-orient: vertical;
 287             -webkit-box-direction: normal;
 288                 flex-direction: column;
 289         -ms-flex-pack: center;
 290             -webkit-box-pack: center;
 291                 justify-content: center;
 292     }
 293     &--header {
 294         font-weight:bold;
 295     }
 296     &--data {
 297         &:nth-child(even) {
 298             background:$neutral-dark-0;
 299         }
 300         &:hover:not(&-active) {
 301             background:$neutral-dark-1;
 302         }
 303         &:hover, .activeUser, &-active{
 304             cursor:pointer;
 305             color:white;
 306         }
 307         .activeUser, &-active{
 308             background: #00acee;
 309         }
 310     }
 311 }
 312
 313 .addInput, .removeInput {
 314     display:-ms-flexbox;
 315     display:-webkit-box;
 316     display:flex;
 317     -webkit-box-align: end;
 318     -ms-flex-align: end;
 319     align-items: flex-end;
 320     margin-bottom: 0.75rem;
 321     margin-left: 1rem;
 322
 323     font-size:0.75rem;
 324     text-transform:uppercase;
 325     font-weight:bold;
 326
 327     cursor:pointer;
 328     img {
 329         height:0.75rem;
 330         margin-right:0.5rem;
 331         width:auto;
 332     }
 333     span {
 334         color: #5b5b5b;
 335         text-transform: uppercase;
 336     }
 337 }