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 }
  94
  95
  96
  97 .FormSection {
  98     &-title {
  99         color: #000;
 100         background: lightgray;
 101         padding: 0.5rem;
 102         border-top: 1px solid #f1f1f1;
 103         border-bottom: 1px solid #f1f1f1;
 104     }
 105     &-body {
 106         padding: 0.5rem 0.75rem;
 107     }
 108     label {
 109         -ms-flex: 1 0;
 110             flex: 1 0;
 111     }
 112     /* label {*/
 113     /*     display: -ms-flexbox;*/
 114     /*     display: flex;*/
 115     /*     -ms-flex-direction: column;*/
 116     /*     flex-direction: column;*/
 117     /*     width: 100%;*/
 118     /*     margin: 0.5rem 0;*/
 119     /*     -ms-flex-align: start;*/
 120     /*     align-items: flex-start;*/
 121     /*     -ms-flex-pack: start;*/
 122     /*     justify-content: flex-start;*/
 123     /* }*/
 124     select {
 125         font-size: 1rem;
 126         min-width: 75%;
 127         height: 35px;
 128     }
 129 }
 130
 131
 132 .InputCollection {
 133     display:-ms-flexbox;
 134     display:flex;
 135     -ms-flex-wrap: nowrap;
 136         flex-wrap: nowrap;
 137     -ms-flex-align: center;
 138         align-items: center;
 139     button {
 140         padding: 0.25rem;
 141         height: 1.5rem;
 142         font-size: 0.75rem;
 143     }
 144     select {
 145         min-width: 100%;
 146     }
 147     margin-bottom:0.5rem;
 148     &-wrapper {
 149
 150     }
 151 }
 152 .tableRow {
 153     display:-ms-flexbox;
 154     display:flex;
 155     -ms-flex-wrap: nowrap;
 156     flex-wrap: nowrap;
 157     padding: 0.25rem;
 158     margin: .125rem 0;
 159     >div {
 160         padding:0.25rem 1rem 0.25rem 0;
 161         -ms-flex: 1 1 33%;
 162             flex: 1 1 33%;
 163     }
 164     &--header {
 165         font-weight:bold;
 166     }
 167     &--data {
 168         &:hover:not(&-active) {
 169             background:$neutral-dark-1;
 170         }
 171         &:hover, .activeUser, &-active{
 172             cursor:pointer;
 173             color:white;
 174         }
 175         .activeUser, &-active{
 176             background: #00acee;
 177         }
 178     }
 179 }
 180
 181 .addInput, .removeInput {
 182     display:-ms-flexbox;
 183     display:flex;
 184     -ms-flex-align:center;
 185     align-items:center;
 186     margin-left: 1rem;
 187
 188     font-size:0.75rem;
 189     text-transform:uppercase;
 190     font-weight:bold;
 191
 192     cursor:pointer;
 193     img {
 194         height:0.75rem;
 195         margin-right:0.5rem;
 196         width:auto;
 197     }
 198     span {
 199         color: #5b5b5b;
 200         text-transform: uppercase;
 201     }
 202 }