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         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     .buttonGroup {
  92         margin: 0 0.5rem 0.5rem;
  93         background: #ddd;
  94         padding-bottom: 0.5rem;
  95         padding: 0.5rem 0;
  96         border-top: #d3d3d3 1px solid;
  97     }
  98     .addUser {
  99         display:-ms-flexbox;
 100         display:flex;
 101         -ms-flex-direction:row;
 102             flex-direction:row;
 103         label {
 104             -ms-flex: 0 1;
 105                 flex: 0 1;
 106                 width:150px;
 107             select {
 108                 width:150px;
 109             }
 110         }
 111     }
 112     .projectUsers {
 113         .userName {
 114             -ms-flex-pack: start;
 115             justify-content: flex-start;
 116             padding-top: 0.75rem;
 117         }
 118         select {
 119             margin-bottom:0.5rem;
 120         }
 121         .addRole {
 122             margin:.25rem 0;
 123         }
 124         .buttonGroup {
 125             display:-ms-flexbox;
 126             display:flex;
 127         }
 128
 129     }
 130     .projectUsers.tableRow--data:hover {
 131             background:none;
 132             color: black;
 133         }
 134
 135     table {
 136         thead {
 137             border-bottom:1px solid #d3d3d3;
 138             td{
 139                 font-weight:bold;
 140             }
 141         }
 142         td{
 143             padding:0.25rem 0.5rem;
 144             vertical-align: middle;
 145             .checkbox {
 146                 -ms-flex-pack:center;
 147                     justify-content:center;
 148             }
 149         }
 150         tbody tr {
 151             &:nth-child(even) {
 152                 background:$neutral-dark-0;
 153             }
 154         }
 155     }
 156 }
 157
 158
 159
 160 .FormSection {
 161     &-title {
 162         color: #000;
 163         background: lightgray;
 164         padding: 0.5rem;
 165         border-top: 1px solid #f1f1f1;
 166         border-bottom: 1px solid #f1f1f1;
 167     }
 168     &-body {
 169         padding: 0.5rem 0.75rem;
 170     }
 171     label {
 172         -ms-flex: 1 0;
 173             flex: 1 0;
 174     }
 175     /* label {*/
 176     /*     display: -ms-flexbox;*/
 177     /*     display: flex;*/
 178     /*     -ms-flex-direction: column;*/
 179     /*     flex-direction: column;*/
 180     /*     width: 100%;*/
 181     /*     margin: 0.5rem 0;*/
 182     /*     -ms-flex-align: start;*/
 183     /*     align-items: flex-start;*/
 184     /*     -ms-flex-pack: start;*/
 185     /*     justify-content: flex-start;*/
 186     /* }*/
 187     select {
 188         font-size: 1rem;
 189         min-width: 75%;
 190         height: 35px;
 191     }
 192 }
 193
 194
 195 .InputCollection {
 196     display:-ms-flexbox;
 197     display:flex;
 198     -ms-flex-wrap: nowrap;
 199         flex-wrap: nowrap;
 200     -ms-flex-align: center;
 201         align-items: center;
 202     button {
 203         padding: 0.25rem;
 204         height: 1.5rem;
 205         font-size: 0.75rem;
 206     }
 207     select {
 208         min-width: 100%;
 209     }
 210     margin-bottom:0.5rem;
 211     &-wrapper {
 212
 213     }
 214 }
 215 .tableRow {
 216     display:-ms-flexbox;
 217     display:flex;
 218     -ms-flex-wrap: nowrap;
 219     flex-wrap: nowrap;
 220     padding: 0.25rem;
 221     margin: .125rem 0;
 222     >div {
 223         padding: 0.25rem;
 224         -ms-flex: 1 1 33%;
 225             flex: 1 1 33%;
 226         display: -ms-flexbox;
 227         display: flex;
 228         -ms-flex-direction: column;
 229             flex-direction: column;
 230         -ms-flex-pack: center;
 231             justify-content: center;
 232     }
 233     &--header {
 234         font-weight:bold;
 235     }
 236     &--data {
 237         &:nth-child(even) {
 238             background:$neutral-dark-0;
 239         }
 240         &:hover:not(&-active) {
 241             background:$neutral-dark-1;
 242         }
 243         &:hover, .activeUser, &-active{
 244             cursor:pointer;
 245             color:white;
 246         }
 247         .activeUser, &-active{
 248             background: #00acee;
 249         }
 250     }
 251 }
 252
 253 .addInput, .removeInput {
 254     display:-ms-flexbox;
 255     display:flex;
 256     -ms-flex-align:center;
 257     align-items:center;
 258     margin-left: 1rem;
 259
 260     font-size:0.75rem;
 261     text-transform:uppercase;
 262     font-weight:bold;
 263
 264     cursor:pointer;
 265     img {
 266         height:0.75rem;
 267         margin-right:0.5rem;
 268         width:auto;
 269     }
 270     span {
 271         color: #5b5b5b;
 272         text-transform: uppercase;
 273     }
 274 }