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

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