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