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           }
 137           button {
 138             /*remove button*/
 139             padding: 0.75rem 0.75rem;
 140             -ms-flex:0 1 auto;
 141                 flex:0 1 auto;
 142           }
 143         }
 144     .inputControls {
 145       -ms-flex: 1 0;
 146           flex: 1 0;
 147       &-sshkeys {
 148         display:-ms-flexbox;
 149         display:flex;
 150         padding-top:0.5rem;
 151         padding-bottom:0px;
 152           -ms-flex: 1 1;
 153               flex: 1 1;
 154         > label {
 155           margin-bottom:0;
 156           margin-top:0;
 157         }
 158         > label:nth-child(2) {
 159               -ms-flex: 0 1 25%;
 160                   flex: 0 1 25%;
 161                   display: -ms-flexbox;
 162                   display: flex;
 163     -ms-flex-direction: column;
 164         flex-direction: column;
 165     -ms-flex-pack: center;
 166         justify-content: center;
 167         }
 168       }
 169       &-title {
 170         margin-bottom: 0.5rem;
 171         font-weight:bold;
 172         text-transform:uppercase;
 173       }
 174       &-radio {
 175         -ms-flex-direction:row;
 176             flex-direction:row;
 177             margin:0.5rem 0.5rem 0.5rem 0;
 178             width:auto;
 179       }
 180       &-radioGroup {
 181         display:-ms-flexbox;
 182         display:flex;
 183       }
 184     }
 185      .addInput, .removeInput {
 186           display:-ms-flexbox;
 187           display:flex;
 188           -ms-flex-align:center;
 189               align-items:center;
 190           margin-left: 1rem;
 191
 192           font-size:0.75rem;
 193           text-transform:uppercase;
 194           font-weight:bold;
 195
 196           cursor:pointer;
 197           img {
 198             height:0.75rem;
 199             margin-right:0.5rem;
 200             width:auto;
 201           }
 202       }
 203     .LaunchpadCard_title {
 204       margin:1rem 0;
 205     }
 206     .placementGroup_description {
 207       margin: 1rem 0;
 208       >div {
 209         margin:1rem 0;
 210         strong {
 211           font-weight:bold;
 212         }
 213         em {
 214           font-style:italic;
 215         }
 216       }
 217       &-name strong{
 218         font-weight:bold;
 219       }
 220     }
 221 }