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         -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(.userName) {
  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(.userName) {
  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(.userName) {
  56                 width: 0px;
  57                 /* transition: all 600ms;*/
  58             }
  59             .userName {
  60                 &--header {
  61                     /* display:none;*/
  62              }
  63             }
  64         }
  65         .userName {
  66             &:not(:first-child) {
  67                 cursor:pointer;
  68             }
  69         }
  70
  71     }
  72     .userInfo {
  73         &-section {
  74             padding: 0.5rem;
  75             margin-bottom: 0;
  76             &:nth-child(even) {
  77                 background:$neutral-dark-0;
  78             }
  79         }
  80     }
  81     .userAdmin {
  82             -ms-flex: 1 1;
  83             -webkit-box-flex: 1;
  84                     flex: 1 1;
  85             width:auto;
  86             opacity:1;
  87     }
  88     &.userList-open {
  89         .userAdmin {
  90             -ms-flex: 0 1 0px;
  91                 -webkit-box-flex: 0;
  92                     flex: 0 1 0px;
  93             opacity:0;
  94             /* width: 0px;*/
  95             display:none;
  96             /* transition: opacity 300ms;*/
  97             /* transition: width 600ms;*/
  98
  99         }
 100     }
 101     .rbacButtonGroup, .buttonSection {
 102         margin: 0 0.5rem 0.5rem;
 103         background: #ddd;
 104         padding-bottom: 0.5rem;
 105         padding: 0.5rem 0;
 106     }
 107     .buttonGroup {
 108         border-top: #d3d3d3 1px solid;
 109         padding-top:0.5rem;
 110     }
 111     table {
 112         font-size: 0.8rem;
 113         thead {
 114             border-bottom:1px solid #d3d3d3;
 115             td{
 116                 font-weight:bold;
 117             }
 118         }
 119         td{
 120             padding:0.25rem 0.5rem;
 121             vertical-align: middle;
 122             .checkbox {
 123                 -ms-flex-pack:center;
 124                     -webkit-box-pack:center;
 125                         justify-content:center;
 126             }
 127         }
 128     }
 129     .sqCheckBox {
 130         width:100%;
 131         label input {
 132             min-width:auto;
 133         }
 134     }
 135     .FormSection label {
 136         -webkit-box-flex: 0;
 137         -ms-flex: 0 1;
 138         flex: 0 1;
 139         margin-right: 1rem;
 140     }
 141 }
 142
 143
 144
 145
 146 .tableRow {
 147     display:-ms-flexbox;
 148     display:-webkit-box;
 149     display:flex;
 150     -ms-flex-wrap: nowrap;
 151     flex-wrap: nowrap;
 152     padding: 0.25rem;
 153     >div {
 154         padding:0.25rem 1rem 0.25rem 0;
 155         -ms-flex: 1 1 33%;
 156             -webkit-box-flex: 1;
 157                 flex: 1 1 33%;
 158     }
 159     &--header {
 160         font-weight:bold;
 161     }
 162     &--data {
 163         &:nth-child(even) {
 164             background:$neutral-dark-0;
 165         }
 166         &:hover:not(&-active) {
 167             background:$neutral-dark-1;
 168         }
 169         &:hover, .activeUser, &-active{
 170             cursor:pointer;
 171             color:white;
 172         }
 173         .activeUser, &-active{
 174             background: #00acee !important;
 175         }
 176     }
 177
 178
 179     .userProfile {
 180         &-table {
 181             thead{
 182                 font-weight:bold;
 183             }
 184             font-size: 1rem;
 185             tr {
 186                 td {
 187                     vertical-align:top;
 188                 }
 189             }
 190         }
 191     }
 192 }
 193
 194
 195
 196
 197 .addInput, .removeInput {
 198     display:-ms-flexbox;
 199     display:-webkit-box;
 200     display:flex;
 201     -ms-flex-align:center;
 202     -webkit-box-align:center;
 203             align-items:center;
 204     margin-left: 1rem;
 205
 206     font-size:0.75rem;
 207     text-transform:uppercase;
 208     font-weight:bold;
 209
 210     cursor:pointer;
 211     img {
 212         height:0.75rem;
 213         margin-right:0.5rem;
 214         width:auto;
 215     }
 216     span {
 217         color: #5b5b5b;
 218         text-transform: uppercase;
 219     }
 220 }
 221