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         -ms-flex-item-align:center;
  11             -ms-grid-row-align:center;
  12             align-self:center;
  13
  14     .skyquakePanel-wrapper {
  15         overflow-x: hidden;
  16     }
  17     .userList {
  18
  19         -ms-flex: 0 1 200px;
  20         flex: 0 1 200px;
  21
  22         .activeUser {
  23             font-weight:bold;
  24         }
  25
  26         /* transition: all 2s;*/
  27         &.expanded {
  28             -ms-flex: 1 1 100%;
  29             flex: 1 1 100%;
  30             /* transition: all 300ms;*/
  31             .tableRow>div:not(.userName) {
  32                 opacity: 1;
  33                 /* width:auto;*/
  34                 /* transition: width 600ms;*/
  35                 /* transition: opacity 300ms;*/
  36             }
  37             &.collapsed {
  38                 -ms-flex: 0 1 200px;
  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             cursor:pointer;
  67         }
  68
  69     }
  70
  71     .userAdmin {
  72             -ms-flex: 1 1;
  73             flex: 1 1;
  74             width:auto;
  75             opacity:1;
  76     }
  77     &.userList-open {
  78         .userAdmin {
  79             -ms-flex: 0 1 0px;
  80                 flex: 0 1 0px;
  81             opacity:0;
  82             /* width: 0px;*/
  83             display:none;
  84             /* transition: opacity 300ms;*/
  85             /* transition: width 600ms;*/
  86
  87         }
  88     }
  89     .buttonGroup {
  90         margin: 0 0.5rem 0.5rem;
  91         background: #ddd;
  92         padding-bottom: 0.5rem;
  93         padding: 0.5rem 0;
  94         border-top: #d3d3d3 1px solid;
  95     }
  96 }
  97
  98
  99
 100 .FormSection {
 101     &-title {
 102         color: #000;
 103         background: lightgray;
 104         padding: 0.5rem;
 105         border-top: 1px solid #f1f1f1;
 106         border-bottom: 1px solid #f1f1f1;
 107     }
 108     &-body {
 109         padding: 0.5rem 0.75rem;
 110     }
 111     label {
 112         -ms-flex: 1 0;
 113             flex: 1 0;
 114     }
 115     /* label {*/
 116     /*     display: -ms-flexbox;*/
 117     /*     display: flex;*/
 118     /*     -ms-flex-direction: column;*/
 119     /*     flex-direction: column;*/
 120     /*     width: 100%;*/
 121     /*     margin: 0.5rem 0;*/
 122     /*     -ms-flex-align: start;*/
 123     /*     align-items: flex-start;*/
 124     /*     -ms-flex-pack: start;*/
 125     /*     justify-content: flex-start;*/
 126     /* }*/
 127     select {
 128         font-size: 1rem;
 129         min-width: 75%;
 130         height: 35px;
 131     }
 132 }
 133
 134
 135 .InputCollection {
 136     display:-ms-flexbox;
 137     display:flex;
 138     -ms-flex-wrap: nowrap;
 139         flex-wrap: nowrap;
 140     -ms-flex-align: center;
 141         align-items: center;
 142     button {
 143         padding: 0.25rem;
 144         height: 1.5rem;
 145         font-size: 0.75rem;
 146     }
 147     select {
 148         min-width: 100%;
 149     }
 150     margin-bottom:0.5rem;
 151     &-wrapper {
 152
 153     }
 154 }
 155 .tableRow {
 156     display:-ms-flexbox;
 157     display:flex;
 158     -ms-flex-wrap: nowrap;
 159     flex-wrap: nowrap;
 160     padding: 0.25rem;
 161     margin: .125rem 0;
 162     >div {
 163         padding:0.25rem 1rem 0.25rem 0;
 164         -ms-flex: 1 1 33%;
 165             flex: 1 1 33%;
 166     }
 167     &--header {
 168         font-weight:bold;
 169     }
 170     &--data {
 171         &:hover:not(&-active) {
 172             background:$neutral-dark-1;
 173         }
 174         &:hover, .activeUser, &-active{
 175             cursor:pointer;
 176             color:white;
 177         }
 178         .activeUser, &-active{
 179             background: #00acee;
 180         }
 181     }
 182 }
 183
 184 .addInput, .removeInput {
 185     display:-ms-flexbox;
 186     display:flex;
 187     -ms-flex-align:center;
 188     align-items:center;
 189     margin-left: 1rem;
 190
 191     font-size:0.75rem;
 192     text-transform:uppercase;
 193     font-weight:bold;
 194
 195     cursor:pointer;
 196     img {
 197         height:0.75rem;
 198         margin-right:0.5rem;
 199         width:auto;
 200     }
 201     span {
 202         color: #5b5b5b;
 203         text-transform: uppercase;
 204     }
 205 }