skyquake/plugins/redundancy/src/dashboard/redundancy.scss

   1 /*
   2  * STANDARD_RIFT_IO_COPYRIGHT
   3  */
   4
   5 @import "style/_colors.scss";
   6
   7 .siteManagement {
   8         max-width: 1200px;
   9
  10     .skyquakePanel-wrapper {
  11         overflow-x: hidden;
  12     }
  13     .siteList {
  14
  15         -ms-flex: 0 1 200px;
  16         -webkit-box-flex: 0;
  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             -webkit-box-flex: 1;
  27                     flex: 1 1 100%;
  28             /* transition: all 300ms;*/
  29             .tableRow>div:not(.siteName) {
  30                 opacity: 1;
  31                 /* width:auto;*/
  32                 /* transition: width 600ms;*/
  33                 /* transition: opacity 300ms;*/
  34             }
  35             &.collapsed {
  36                 -ms-flex: 0 1 200px;
  37                 -webkit-box-flex: 0;
  38                         flex: 0 1 200px;
  39                 /* transition: all 2s;*/
  40                 .tableRow>div:not(.siteName) {
  41                     /* opacity: 0;*/
  42                     /* width:0px;*/
  43                     display:none;
  44                     overflow:hidden;
  45                     /* transition: all 600ms;*/
  46                 }
  47             }
  48         }
  49         &.hideColumns {
  50             overflow:hidden;
  51             >div {
  52                 overflow:hidden;
  53             }
  54             .tableRow>div:not(.siteName) {
  55                 width: 0px;
  56                 /* transition: all 600ms;*/
  57             }
  58             .siteName {
  59                 &--header {
  60                     /* display:none;*/
  61              }
  62             }
  63         }
  64         .siteName {
  65             &:not(:first-child) {
  66                 cursor:pointer;
  67             }
  68         }
  69
  70
  71     }
  72
  73     .siteAdmin {
  74             -ms-flex: 1 1;
  75             -webkit-box-flex: 1;
  76                     flex: 1 1;
  77             width:auto;
  78             opacity:1;
  79
  80         textarea{
  81             height: 100px;
  82         }
  83     }
  84     &.siteList-open {
  85         .siteAdmin {
  86             -ms-flex: 0 1 0px;
  87                 -webkit-box-flex: 0;
  88                     flex: 0 1 0px;
  89             opacity:0;
  90             /* width: 0px;*/
  91             display:none;
  92             /* transition: opacity 300ms;*/
  93             /* transition: width 600ms;*/
  94
  95         }
  96     }
  97     .rbacButtonGroup {
  98         margin: 0 0.5rem 0.5rem;
  99         background: #ddd;
 100         padding-bottom: 0.5rem;
 101         padding: 0.5rem 0;
 102     }
 103     .buttonGroup {
 104         border-top: #d3d3d3 1px solid;
 105         padding-top:0.5rem;
 106     }
 107     .addUser {
 108         display:-ms-flexbox;
 109         display:-webkit-box;
 110         display:flex;
 111         -ms-flex-direction:row;
 112             -webkit-box-orient:horizontal;
 113             -webkit-box-direction:normal;
 114                 flex-direction:row;
 115         label {
 116             -webkit-box-orient: vertical;
 117             -webkit-box-direction: normal;
 118                 -ms-flex-direction: column;
 119                     flex-direction: column;
 120             display: -webkit-box;
 121             display: -ms-flexbox;
 122             display: flex;
 123             -ms-flex: 0 1;
 124             -webkit-box-flex: 0;
 125                 flex: 0 1;
 126
 127             width:150px;
 128             span {
 129                 margin-bottom: 0.5rem;
 130             }
 131             span:nth-child(2) {
 132                 -webkit-box-align: center;
 133                     -ms-flex-align: center;
 134                         align-items: center;
 135                 -webkit-box-flex: 1;
 136                     -ms-flex: 1;
 137                         flex: 1;
 138                 display: -webkit-box;
 139                 display: -ms-flexbox;
 140                 display: flex;
 141             }
 142
 143             margin-right: 1rem;
 144             select {
 145                 width:150px;
 146             }
 147         }
 148         .noUsersAvailable {
 149             display:-webkit-box;
 150             display:-ms-flexbox;
 151             display:flex;
 152             -webkit-box-align: start;
 153                 -ms-flex-align: start;
 154                     align-items: flex-start;
 155             margin-bottom: 0.75rem;
 156             -webkit-box-flex: 1;
 157                 -ms-flex: 1;
 158                     flex: 1;
 159             div {
 160                 width:260px;
 161                 margin-bottom: 0.5rem;
 162             }
 163         }
 164     }
 165     .siteUsers {
 166         .userName {
 167             -ms-flex-pack: start;
 168             -webkit-box-pack: start;
 169                     justify-content: flex-start;
 170             padding-top: 0.75rem;
 171         }
 172         select {
 173             margin-bottom:0.5rem;
 174         }
 175         .addRole {
 176             margin:.25rem 0;
 177         }
 178         .buttonGroup {
 179             display:-ms-flexbox;
 180             display:-webkit-box;
 181             display:flex;
 182         }
 183
 184     }
 185     .siteUsers.tableRow--data:hover {
 186             background:none;
 187             color: black;
 188         }
 189
 190     table {
 191         font-size: 0.8rem;
 192         thead {
 193             border-bottom:1px solid #d3d3d3;
 194             td{
 195                 font-weight:bold;
 196             }
 197         }
 198         td{
 199             padding:0.25rem 0.5rem;
 200             vertical-align: middle;
 201             .checkbox {
 202                 -ms-flex-pack:center;
 203                     -webkit-box-pack:center;
 204                         justify-content:center;
 205             }
 206         }
 207         tbody tr {
 208             &:nth-child(even) {
 209                 background:$neutral-dark-0;
 210             }
 211         }
 212     }
 213     .userTable {
 214         .FormSection-body {
 215             overflow-x: auto;
 216         }
 217     }
 218
 219
 220     .FormSection {
 221         &-title, &-body {
 222             padding-left: 0px;
 223         }
 224     }
 225     .subSection {
 226         .FormSection-title {
 227             color: #000;
 228             background: none;
 229             padding: 0.5rem;
 230             border-top: none;
 231             border-bottom: 1px solid $neutral-dark-2;
 232             text-transform:uppercase;
 233             width: 50%;
 234             padding-left: 0;
 235
 236         }
 237         .FormSection-body {
 238             padding-left: 0;
 239         }
 240         label {
 241             -ms-flex: 1 0;
 242                 -webkit-box-flex: 1;
 243                     flex: 1 0;
 244         }
 245         /* label {*/
 246         /*     display: -ms-flexbox;*/
 247         /*     display: flex;*/
 248         /*     -ms-flex-direction: column;*/
 249         /*     flex-direction: column;*/
 250         /*     width: 100%;*/
 251         /*     margin: 0.5rem 0;*/
 252         /*     -ms-flex-align: start;*/
 253         /*     align-items: flex-start;*/
 254         /*     -ms-flex-pack: start;*/
 255         /*     justify-content: flex-start;*/
 256         /* }*/
 257         select {
 258             font-size: 1rem;
 259             min-width: 75%;
 260             height: 35px;
 261         }
 262     }
 263     .sqCheckBox {
 264         width: 480px;
 265     }
 266 }
 267
 268
 269
 270 .InputCollection {
 271     display:-ms-flexbox;
 272     display:-webkit-box;
 273     display:flex;
 274     -ms-flex-wrap: nowrap;
 275         flex-wrap: nowrap;
 276     -ms-flex-align: center;
 277         -webkit-box-align: center;
 278             align-items: center;
 279     button {
 280         padding: 0.25rem;
 281         height: 1.5rem;
 282         font-size: 0.75rem;
 283     }
 284     select {
 285         min-width: 100%;
 286     }
 287     margin-bottom:0.5rem;
 288     &-wrapper {
 289
 290     }
 291 }
 292 .tableRow {
 293     display:-ms-flexbox;
 294     display:-webkit-box;
 295     display:flex;
 296     -ms-flex-wrap: nowrap;
 297     flex-wrap: nowrap;
 298     padding: 0.25rem;
 299     >div {
 300         padding: 0.25rem;
 301         -ms-flex: 1 1 33%;
 302             -webkit-box-flex: 1;
 303                 flex: 1 1 33%;
 304         display: -ms-flexbox;
 305         display: -webkit-box;
 306         display: flex;
 307         -ms-flex-direction: column;
 308         -webkit-box-orient: vertical;
 309         -webkit-box-direction: normal;
 310         flex-direction: column;
 311         -ms-flex-pack: center;
 312         -webkit-box-pack: center;
 313         justify-content: center;
 314     }
 315     &--header {
 316         font-weight:bold;
 317     }
 318     &--data {
 319         &:nth-child(even) {
 320             background:$neutral-dark-0;
 321         }
 322         &:hover:not(&-active) {
 323             background:$neutral-dark-1;
 324         }
 325         &:hover, .activeUser, &-active{
 326             cursor:pointer;
 327             color:white;
 328         }
 329         .activeUser, &-active{
 330             background: #00acee;
 331         }
 332     }
 333 }
 334 .rwInstance {
 335     width:100%;
 336     border-bottom: 1px solid $neutral-dark-5;
 337     margin-bottom: 1rem;
 338     h3 {
 339         display: -webkit-box;
 340         display: -ms-flexbox;
 341         display: flex;
 342         justify-content: space-between;
 343         color: $neutral-dark-5;
 344         margin-bottom: 1rem;
 345     }
 346     span.title {
 347         color: $gray-darker;
 348     }
 349     .sqTextInput {
 350         max-width: 400px;
 351     }
 352 }
 353
 354 .sqCheckBox label input {
 355     min-width: auto;
 356     margin: 1rem;
 357 }
 358 .addInput, .removeInput {
 359     display:-ms-flexbox;
 360     display:-webkit-box;
 361     display:flex;
 362     -webkit-box-align: end;
 363     -ms-flex-align: end;
 364     align-items: flex-end;
 365     margin-bottom: 0.75rem;
 366     margin-left: 1rem;
 367
 368     font-size:0.75rem;
 369     text-transform:uppercase;
 370     font-weight:bold;
 371
 372     cursor:pointer;
 373     img {
 374         height:0.75rem;
 375         margin-right:0.5rem;
 376         width:auto;
 377     }
 378     span {
 379         color: #5b5b5b;
 380         text-transform: uppercase;
 381     }
 382 }