skyquake/plugins/accounts/src/account_sidebar/accountSidebar.scss

   1 /*
   2  *
   3  *   Copyright 2016 RIFT.IO Inc
   4  *
   5  *   Licensed under the Apache License, Version 2.0 (the "License");
   6  *   you may not use this file except in compliance with the License.
   7  *   You may obtain a copy of the License at
   8  *
   9  *       http://www.apache.org/licenses/LICENSE-2.0
  10  *
  11  *   Unless required by applicable law or agreed to in writing, software
  12  *   distributed under the License is distributed on an "AS IS" BASIS,
  13  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *   See the License for the specific language governing permissions and
  15  *   limitations under the License.
  16  *
  17  */
  18 @import 'style/_colors.scss';
  19 .accountSidebar {
  20     -ms-flex:1 1 100%;
  21         flex:1 1 100%;
  22     max-width:300px;
  23     h1 {
  24       margin-left:1rem;
  25     }
  26     a {
  27         text-decoration:none;
  28                 color:inherit;
  29                 width:100%;
  30     }
  31     .accountSidebarCard {
  32         width:auto;
  33         height:auto;
  34         background:inherit;
  35         header {
  36             background:white;
  37             padding-left:0.5rem;
  38             display:-ms-flexbox;
  39             display:flex;
  40                 -ms-flex-align:start;
  41                     align-items:flex-start;
  42             text-transform:uppercase;
  43             h3 {
  44                 display:-ms-flexbox;
  45                 display:flex;
  46                 -ms-flex:1;
  47                     flex:1;
  48                 -ms-flex-pack:justify;
  49                     justify-content:space-between;
  50                 -ms-flex-align: center;
  51                     align-items: center;
  52                  padding-left:0.5rem;
  53             }
  54         }
  55         &--content {
  56             display:-ms-flexbox;
  57             display:flex;
  58             -ms-flex-pack:start;
  59             justify-content:flex-start;
  60             -ms-flex-align: center;
  61                 align-items: center;
  62             height:70px;
  63         }
  64         &--logo{
  65             max-width:50px;
  66             max-height:50px;
  67         }
  68         .pool-card {
  69             a:before {
  70                 text-align: center;
  71                 font-size: 0.575rem;
  72                 border: 1px solid black;
  73                 border-radius: 4px;
  74                 padding: 0.25rem 0.425rem 0.25rem 0.25rem;
  75                 height: 0.625rem;
  76                 width: 0.625rem;
  77                 margin-right: 0.25rem;
  78             }
  79             a:nth-child(even) {
  80                 background-color: $lightest-gray;
  81             }
  82             a.link-item {
  83                 background-color: $dark-gray;
  84                 display: -ms-flexbox;
  85                 display: flex;
  86                 -ms-flex-direction: row;
  87                     flex-direction: row;
  88                 padding: 1rem;
  89                 -ms-flex-pack: start;
  90                     justify-content: flex-start;
  91                 text-decoration: none;
  92                 color: black;
  93             }
  94             a.empty-pool {
  95                 margin-top:0.125rem;
  96                 display:-ms-flexbox;
  97                 display:flex;
  98                 -ms-flex-pack: justify;
  99                     justify-content: space-between;
 100                 img {
 101                     height:1rem;
 102                 }
 103             }
 104             a.vm:before {
 105                 content: 'VM';
 106             }
 107             a.network:before {
 108                 content: 'NT';
 109             }
 110             a.port:before {
 111                 content: 'PT';
 112             }
 113         }
 114         h2.create-title {
 115                 font-size: 0.85rem;
 116                 text-transform:uppercase;
 117                 padding: 0px;
 118                 background-color:inherit
 119         }
 120         &_create {
 121             display:-ms-flexbox;
 122             display:flex;
 123             -ms-flex-pack:justify;
 124                 justify-content:space-between;
 125             padding:1rem;
 126             font-size: 0.85rem;
 127             text-transform:uppercase;
 128             font-weight:bold;
 129             background-color: $gray-light;
 130             img {
 131                 height:1rem;
 132             }
 133         }
 134     }
 135     .connectivityStatus {
 136         border:1px solid $lightest-gray;
 137         border-radius:50%;
 138         width:0.5rem;
 139         height:0.5rem;
 140         margin-right:1rem;
 141         background:$lightest-gray;
 142         &--success {
 143             background:$brand-green;
 144         }
 145         &--failure {
 146             background:$error-red;
 147         }
 148     }
 149     .refreshList {
 150         margin-left: 1rem;
 151         margin-bottom:1rem;
 152         display:-ms-flexbox;
 153         display:flex;
 154         -ms-flex-align:center;
 155         align-items:center;
 156         padding: 0.5rem;
 157         cursor: pointer;
 158         text-transform:uppercase;
 159     }
 160 }