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