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         -webkit-box-flex:1;
  22             flex:1 1 100%;
  23     max-width:300px;
  24     h1 {
  25       margin-left:1rem;
  26     }
  27     a {
  28         text-decoration:none;
  29                 color:inherit;
  30                 width:100%;
  31     }
  32     .accountSidebarCard {
  33         width:auto;
  34         height:auto;
  35         background:inherit;
  36         header {
  37             background:white;
  38             padding-left:0.5rem;
  39             display:-ms-flexbox;
  40             display:-webkit-box;
  41             display:flex;
  42                 -ms-flex-align:start;
  43                     -webkit-box-align:start;
  44                         align-items:flex-start;
  45             text-transform:uppercase;
  46             h3 {
  47                 display:-ms-flexbox;
  48                 display:-webkit-box;
  49                 display:flex;
  50                 -ms-flex:1;
  51                     -webkit-box-flex:1;
  52                         flex:1;
  53                 -ms-flex-pack:justify;
  54                     -webkit-box-pack:justify;
  55                         justify-content:space-between;
  56                 -ms-flex-align: center;
  57                     -webkit-box-align: center;
  58                         align-items: center;
  59                  padding-left:0.5rem;
  60             }
  61         }
  62         &--name {
  63             text-overflow: ellipsis;
  64             overflow: hidden;
  65             max-width: 170px;
  66         }
  67         &--content {
  68             display:-ms-flexbox;
  69             display:-webkit-box;
  70             display:flex;
  71             -ms-flex-pack:start;
  72             -webkit-box-pack:start;
  73                     justify-content:flex-start;
  74             -ms-flex-align: center;
  75                 -webkit-box-align: center;
  76                     align-items: center;
  77             height:70px;
  78         }
  79         &--logo{
  80             max-width:50px;
  81             max-height:50px;
  82         }
  83         .pool-card {
  84             a:before {
  85                 text-align: center;
  86                 font-size: 0.575rem;
  87                 border: 1px solid black;
  88                 border-radius: 4px;
  89                 padding: 0.25rem 0.425rem 0.25rem 0.25rem;
  90                 height: 0.625rem;
  91                 width: 0.625rem;
  92                 margin-right: 0.25rem;
  93             }
  94             a:nth-child(even) {
  95                 background-color: $lightest-gray;
  96             }
  97             a.link-item {
  98                 background-color: $dark-gray;
  99                 display: -ms-flexbox;
 100                 display: -webkit-box;
 101                 display: flex;
 102                 -ms-flex-direction: row;
 103                     -webkit-box-orient: horizontal;
 104                     -webkit-box-direction: normal;
 105                         flex-direction: row;
 106                 padding: 1rem;
 107                 -ms-flex-pack: start;
 108                     -webkit-box-pack: start;
 109                         justify-content: flex-start;
 110                 text-decoration: none;
 111                 color: black;
 112             }
 113             a.empty-pool {
 114                 margin-top:0.125rem;
 115                 display:-ms-flexbox;
 116                 display:-webkit-box;
 117                 display:flex;
 118                 -ms-flex-pack: justify;
 119                     -webkit-box-pack: justify;
 120                         justify-content: space-between;
 121                 img {
 122                     height:1rem;
 123                 }
 124             }
 125             a.vm:before {
 126                 content: 'VM';
 127             }
 128             a.network:before {
 129                 content: 'NT';
 130             }
 131             a.port:before {
 132                 content: 'PT';
 133             }
 134         }
 135         h2.create-title {
 136                 font-size: 0.85rem;
 137                 text-transform:uppercase;
 138                 padding: 0px;
 139                 background-color:inherit
 140         }
 141         &_create {
 142             display:-ms-flexbox;
 143             display:-webkit-box;
 144             display:flex;
 145             -ms-flex-pack:justify;
 146                 -webkit-box-pack:justify;
 147                     justify-content:space-between;
 148             padding:1rem;
 149             font-size: 0.85rem;
 150             text-transform:uppercase;
 151             font-weight:bold;
 152             background-color: $gray-light;
 153             img {
 154                 height:1rem;
 155             }
 156         }
 157     }
 158     .connectivityStatus {
 159         border:1px solid $lightest-gray;
 160         border-radius:50%;
 161         width:0.5rem;
 162         height:0.5rem;
 163         margin-right:1rem;
 164         background:$lightest-gray;
 165         &--success {
 166             background:$brand-green;
 167         }
 168         &--failure {
 169             background:$error-red;
 170         }
 171     }
 172     .refreshList {
 173         margin-left: 1rem;
 174         margin-bottom:1rem;
 175         display:-ms-flexbox;
 176         display:-webkit-box;
 177         display:flex;
 178         -ms-flex-align:center;
 179         -webkit-box-align:center;
 180                 align-items:center;
 181         padding: 0.5rem;
 182         cursor: pointer;
 183         text-transform:uppercase;
 184     }
 185 }