skyquake/plugins/config/src/dashboard/config.scss

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