skyquake/plugins/accounts/src/account/account.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 .Accounts {
  20     -ms-flex: 1 1 100%;
  21         flex: 1 1 100%;
  22
  23     .refreshStatus {
  24         margin-left: 0.5rem;
  25         padding: 1rem 0;
  26
  27         .currentStatus {
  28             text-transform: uppercase;
  29             display:-ms-flexbox;
  30             display:flex;
  31             -ms-flex-line-pack:center;
  32                 align-content:center;
  33         }
  34         span.oi {
  35             cursor: pointer;
  36         }
  37     }
  38     .delete, .cancel {
  39         cursor: pointer;
  40     }
  41     .associateSdnAccount {
  42         margin: 1rem;
  43     }
  44     .create > .flex-row > li {
  45         -ms-flex: 1 1 auto;
  46             flex: 1 1 auto;
  47         margin: 0 .25rem;
  48     }
  49     .create > .flex-row > li:first-child {
  50         margin-left: .5rem;
  51     }
  52     .create > .flex-row > li:last-child {
  53         margin-right: .5rem;
  54     }
  55     /* .flex-row > li h3 {*/
  56     /*     background-color: #ffffff;*/
  57     /*     padding: 12px 18px;*/
  58     /*     text-transform: uppercase;*/
  59     /* }*/
  60     .create .options {
  61         -ms-flex-wrap: wrap;
  62             flex-wrap: wrap;
  63         text-align: center;
  64         margin: 24px auto;
  65         width: 90%;
  66         flex-wrap: wrap;
  67         margin: 24px auto;
  68         width: 90%;
  69         -ms-flex-pack: start;
  70             justify-content: flex-start;
  71     }
  72     .create .options a {
  73         background-color: #ffffff;
  74         -ms-flex: 0 1 32%;
  75             flex: 0 1 32%;
  76         margin: 0 4px 4px 0;
  77         padding: 4px;
  78         box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
  79     }
  80     .create .options a h5 {
  81         font-size: 10px;
  82         margin: 5px 0 0 5px;
  83         text-align: left;
  84     }
  85     .create .options a img {
  86         margin-top: 10px;
  87         width: 70%;
  88     }
  89     .list-pools {
  90         padding: 24px;
  91     }
  92     .list-pools li a {
  93         background-color: #ffffff;
  94         display: block;
  95         font-size: 12px;
  96         margin-bottom: 24px;
  97         padding: 12px;
  98         text-align: center;
  99         box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
 100     }
 101     .list-pools li h4 {
 102         text-align: left;
 103     }
 104     .list-pools li img {
 105         margin-top: 24px;
 106         width: 65%;
 107     }
 108     .form-actions {
 109         clear: both;
 110         margin-top: 36px;
 111         text-align: center;
 112     }
 113     .form-actions a {
 114         color: #000000;
 115         display: inline-block;
 116         font-size: 12px;
 117         padding: 8px 64px;
 118         text-decoration: none;
 119         text-transform: uppercase;
 120         box-shadow: 2px 2px rgba(0, 0, 0, 0.15);
 121     }
 122     .form-actions a.save {
 123         background-color: #ffffff;
 124         border: 1px solid #cccccc;
 125         border-top: 0;
 126         cursor: pointer;
 127         margin-right: 48px;
 128     }
 129     .form-actions a.launch {
 130         background-color: #333333;
 131         border: 1px solid #000000;
 132         border-top: 0;
 133         color: #ffffff;
 134     }
 135     .form-actions a.launch:hover, .form-actions a.launch:active {
 136         background: #00acee;
 137         color: #ffffff;
 138     }
 139     .create .select-type {
 140         margin: 0.5rem;
 141     }
 142     /* .create-fleet-pool label {*/
 143     /*     padding: 0.125rem;*/
 144     /*     display: block;*/
 145     /* }*/
 146     /* .create-fleet-pool input {*/
 147     /*     width: 350px;*/
 148     /*     height: 35px;*/
 149     /*     margin: 0px 20px 10px 15px;*/
 150     /*     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #ffffff, 0 1px 0 #ffffff;*/
 151     /*     font-size: 20px;*/
 152     /* }*/
 153     .create .optional {
 154         font-style: italic;
 155     }
 156     .name-input input {
 157       background:white !important;
 158       box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #ffffff, 0 1px 0 #ffffff;
 159       display: block;
 160       font-size: 120%;
 161       height: 35px;
 162       margin: 0;
 163       margin-top: 0.25rem;
 164       width: 350px;
 165     }
 166     .select-type {
 167         display:-ms-flexbox;
 168         display:flex;
 169     }
 170     .accountSelection {
 171         display:-ms-flexbox;
 172         display:flex;
 173         -ms-flex:0 1;
 174             flex:0 1;
 175         position:relative;
 176         -ms-flex-direction:column;
 177         flex-direction:column;
 178         margin-right:0.5rem;
 179         -ms-flex-align:center;
 180         align-items:center;
 181         border-top:$gray-light 1px solid;
 182         border-left:$gray-light 1px solid;
 183         border-right:$gray-dark 1px solid;
 184         border-bottom:$gray-dark 1px solid;
 185         box-shadow: $gray 2px 2px 3px;
 186         cursor:pointer;
 187         background:white;
 188         &:last-child {
 189             margin-right:0;
 190         }
 191
 192         input[type="radio"] {
 193             opacity: 0.01;
 194             position:absolute;
 195             top:0;
 196         }
 197         &-imageWrapper {
 198             display:-ms-flexbox;
 199             display:flex;
 200             -ms-flex-direction:column;
 201                 flex-direction:column;
 202             margin:0.5rem;
 203             padding:0.25rem;
 204             background:white;
 205             width:100px;
 206             height:50px;
 207             -ms-flex-align:center;
 208                 align-items:center;
 209             -ms-flex-pack:center;
 210                 justify-content:center;
 211             img{
 212                 max-width:100px;
 213                 max-height:50px;
 214             }
 215         }
 216         span {
 217             padding-bottom:0.5rem;
 218         }
 219         &-overlay {
 220             position:absolute;
 221             top:0;
 222             left:0;
 223             right:0;
 224             bottom:0;
 225             height:100%;
 226             width:100%;
 227             background: rgba(0, 0, 0, 0.25);
 228             opacity: 0.2;
 229         }
 230         &--isSelected{
 231             border-bottom:$gray-light 1px solid;
 232             border-right:$gray-light 1px solid;
 233             border-top:$gray-dark 1px solid;
 234             border-left:$gray-dark 1px solid;
 235             box-shadow: $gray 2px 2px 3px inset;
 236         }
 237     }
 238     .accountForm {
 239         margin:0.5rem 0;
 240         width:100%;
 241         background: $gray-lighter;
 242         &-title {
 243             background-color: #ffffff;
 244             padding: 12px 0.5rem;
 245             text-transform: uppercase;
 246             &--edit {
 247                 display:-ms-flexbox;
 248                 display:flex;
 249                 -ms-flex-pack:justify;
 250                     justify-content:space-between;
 251                 -ms-flex-align: center;
 252                     align-items: center;
 253                 >div {
 254                     display:-ms-flexbox;
 255                     display:flex;
 256                     -ms-flex-align:center;
 257                         align-items:center;
 258                 }
 259             }
 260         }
 261         img {
 262             height:2rem;
 263             margin:0 0.5rem;
 264         }
 265         &-content {
 266             padding:0.5rem;
 267         }
 268         &-nestedParams {
 269             display:-ms-flexbox;
 270             display:flex;
 271             > label {
 272                 margin-right:0.5rem;
 273             }
 274             > label:last-child {
 275                 margin-right:0rem;
 276             }
 277
 278         }
 279     }
 280     .connectivityStatus {
 281         display:block;
 282         border:1px solid $lightest-gray;
 283         border-radius:50%;
 284         width:0.5rem;
 285         height:0.5rem;
 286         margin-right: 0.25rem;
 287         margin-top: 0;
 288         background:$lightest-gray;
 289         &--success {
 290             background:$brand-green;
 291         }
 292         &--failure {
 293             background:$error-red;
 294         }
 295     }
 296     .refreshList {
 297         padding: 0.5rem;
 298         margin: 0;
 299         cursor: pointer;
 300         text-transform:uppercase;
 301     }
 302 }