skyquake/plugins/launchpad/src/instantiate/instantiateInputParams.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
  19 @import 'style/_colors.scss';
  20 @import 'style/layout.scss';
  21 .instantiateInputParams {
  22     -ms-flex-preferred-size: 70%;
  23         flex-basis: 70%;
  24     &_section {
  25       width:100%;
  26       padding-top:0rem;
  27       &:last-child {
  28         padding-bottom:2rem;
  29       }
  30       &:first-child{
  31         padding-top:0;
  32       }
  33       &:nth-child(odd) {
  34         background:$gray-lighter;
  35       }
  36       >div {
  37         padding:1rem;
  38       }
  39       h3 {
  40         width:100%;
  41         text-transform:uppercase;
  42         padding-right: 0;
  43
  44       }
  45       &-info {
  46         /*add button*/
  47         button{
  48           margin:0;
  49         }
  50         label {
  51           >div {
  52             display: none;
  53             -ms-flex-align: center;
  54                 -ms-grid-row-align: center;
  55                 align-items: center;
  56           }
  57           >span{
  58             display:-ms-flexbox;
  59             display:flex;
  60             -ms-flex-align:center;
  61                 align-items:center;
  62           }
  63         }
  64       }
  65     }
  66     &-body {
  67       -ms-flex-align: center;
  68           -ms-grid-row-align: center;
  69           align-items: center;
  70       -ms-flex: none;
  71           flex: none;
  72       display: block;
  73       width:100%;
  74
  75     }
  76     label {
  77         display: -ms-flexbox;
  78         display: flex;
  79         -ms-flex-direction: column;
  80             flex-direction: column;
  81         width: 100%;
  82         margin: 0.5rem 0;
  83         -ms-flex-align: start;
  84             align-items: flex-start;
  85         -ms-flex-pack:start;
  86             justify-content:flex-start;
  87         input[type="text"], input[type="password"] {
  88           height: 35px;
  89           box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #ffffff, 0 1px 0 #ffffff;
  90           font-size: 1rem;
  91           display: block;
  92           background: white !important;
  93           margin: 0;
  94           margin-top: 0.25rem;
  95           min-width:75%;
  96         }
  97         select {
  98           font-size: 1rem;
  99           min-width:75%;
 100           height:35px;
 101         }
 102         span {
 103           color:$darker-gray;
 104           text-transform:uppercase;
 105         }
 106         >span {
 107           display:-ms-flexbox;
 108           display:flex;
 109           margin-bottom: 0.5rem;
 110         }
 111         :first-child {
 112         }
 113       }
 114       .input_group{
 115           display:-ms-flexbox;
 116           display:flex;
 117           -ms-flex-wrap: wrap;
 118               flex-wrap: wrap;
 119           -ms-flex-pack: justify;
 120               justify-content: space-between;
 121           input, button{
 122             -ms-flex: 1 1 auto;
 123                 flex: 1 1 auto;
 124             margin-right: 1rem;
 125             min-width:auto;
 126           }
 127           &-users {
 128             display:-ms-flexbox;
 129             display:flex;
 130             -ms-flex-align: start;
 131                 align-items: flex-start;
 132             .removeInput {
 133               -ms-flex: 0 1;
 134                   flex: 0 1;
 135             }
 136             .inputControls-sshkeys {
 137               margin-bottom:1rem;
 138               padding-top:0;
 139               -ms-flex-align: end;
 140               align-items: flex-end;
 141               > label {
 142                 width:auto;
 143                 &:nth-child(2) {
 144                     margin-bottom: 1.25rem;
 145                 }
 146               }
 147             }
 148           }
 149           button {
 150             /*remove button*/
 151             padding: 0.75rem 0.75rem;
 152             -ms-flex:0 1 auto;
 153                 flex:0 1 auto;
 154           }
 155         }
 156     .inputControls {
 157       -ms-flex: 1 0;
 158           flex: 1 0;
 159       &-sshkeys {
 160         display:-ms-flexbox;
 161         display:flex;
 162         padding-top:0.5rem;
 163         padding-bottom:0px;
 164           -ms-flex: 1 1;
 165               flex: 1 1;
 166         > label {
 167           margin-bottom:0;
 168           margin-top:0;
 169         }
 170         > label:nth-child(2) {
 171               -ms-flex: 0 1 25%;
 172                   flex: 0 1 25%;
 173                   display: -ms-flexbox;
 174                   display: flex;
 175     -ms-flex-direction: column;
 176         flex-direction: column;
 177     -ms-flex-pack: center;
 178         justify-content: center;
 179         }
 180       }
 181       &-title {
 182         margin-bottom: 0.5rem;
 183         font-weight:bold;
 184         text-transform:uppercase;
 185       }
 186       &-radio {
 187         -ms-flex-direction:row;
 188             flex-direction:row;
 189             margin:0.5rem 0.5rem 0.5rem 0;
 190             width:auto;
 191       }
 192       &-radioGroup {
 193         display:-ms-flexbox;
 194         display:flex;
 195       }
 196       &-addUser {
 197         margin-top:1rem;
 198         .addInput {
 199           margin-left:0;
 200           font-size:1rem;
 201           >span {
 202             color: #5b5b5b;
 203           }
 204         }
 205       }
 206     }
 207      .addInput, .removeInput {
 208           display:-ms-flexbox;
 209           display:flex;
 210           -ms-flex-align:center;
 211               align-items:center;
 212           margin-left: 1rem;
 213
 214           font-size:0.75rem;
 215           text-transform:uppercase;
 216           font-weight:bold;
 217
 218           cursor:pointer;
 219           img {
 220             height:0.75rem;
 221             margin-right:0.5rem;
 222             width:auto;
 223           }
 224       }
 225     .LaunchpadCard_title {
 226       margin:1rem 0;
 227     }
 228     .placementGroup_description {
 229       margin: 1rem 0;
 230       >div {
 231         margin:1rem 0;
 232         strong {
 233           font-weight:bold;
 234         }
 235         em {
 236           font-style:italic;
 237         }
 238       }
 239       &-name strong{
 240         font-weight:bold;
 241       }
 242     }
 243 }