skyquake/plugins/user_management/src/dashboard/userMgmt.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 .userManagement {
   9         max-width: 900px;
  10
  11     .skyquakePanel-wrapper {
  12         overflow-x: hidden;
  13     }
  14     .userList {
  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(.userName) {
  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(.userName) {
  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(.userName) {
  53                 width: 0px;
  54                 /* transition: all 600ms;*/
  55             }
  56             .userName {
  57                 &--header {
  58                     /* display:none;*/
  59              }
  60             }
  61         }
  62         .userName {
  63             cursor:pointer;
  64         }
  65
  66     }
  67
  68     .userAdmin {
  69             -ms-flex: 1 1;
  70             flex: 1 1;
  71             width:auto;
  72             opacity:1;
  73     }
  74     &.userList-open {
  75         .userAdmin {
  76             -ms-flex: 0 1 0px;
  77                 flex: 0 1 0px;
  78             opacity:0;
  79             /* width: 0px;*/
  80             display:none;
  81             /* transition: opacity 300ms;*/
  82             /* transition: width 600ms;*/
  83
  84         }
  85     }
  86     .buttonGroup {
  87         margin: 0 0.5rem 0.5rem;
  88         background: #ddd;
  89         padding-bottom: 0.5rem;
  90         padding: 0.5rem 0;
  91         border-top: #d3d3d3 1px solid;
  92     }
  93     table {
  94         font-size: 0.8rem;
  95         thead {
  96             border-bottom:1px solid #d3d3d3;
  97             td{
  98                 font-weight:bold;
  99             }
 100         }
 101         td{
 102             padding:0.25rem 0.5rem;
 103             vertical-align: middle;
 104             .checkbox {
 105                 -ms-flex-pack:center;
 106                     justify-content:center;
 107             }
 108         }
 109     }
 110 }
 111
 112
 113
 114
 115 .tableRow {
 116     display:-ms-flexbox;
 117     display:flex;
 118     -ms-flex-wrap: nowrap;
 119     flex-wrap: nowrap;
 120     padding: 0.25rem;
 121     margin: .125rem 0;
 122     >div {
 123         padding:0.25rem 1rem 0.25rem 0;
 124         -ms-flex: 1 1 33%;
 125             flex: 1 1 33%;
 126     }
 127     &--header {
 128         font-weight:bold;
 129     }
 130     &--data {
 131         &:hover:not(&-active) {
 132             background:$neutral-dark-1;
 133         }
 134         &:hover, .activeUser, &-active{
 135             cursor:pointer;
 136             color:white;
 137         }
 138         .activeUser, &-active{
 139             background: #00acee;
 140         }
 141     }
 142 }
 143
 144 .addInput, .removeInput {
 145     display:-ms-flexbox;
 146     display:flex;
 147     -ms-flex-align:center;
 148     align-items:center;
 149     margin-left: 1rem;
 150
 151     font-size:0.75rem;
 152     text-transform:uppercase;
 153     font-weight:bold;
 154
 155     cursor:pointer;
 156     img {
 157         height:0.75rem;
 158         margin-right:0.5rem;
 159         width:auto;
 160     }
 161     span {
 162         color: #5b5b5b;
 163         text-transform: uppercase;
 164     }
 165 }