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