skyquake/plugins/launchpad/src/launchpad_card/vnfrConfigPrimitives.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 @mixin optional() {
  20     /* height: 1.25rem;*/
  21     /* margin-left: 0.5rem;*/
  22     /* margin-top: 0.5rem;*/
  23     -ms-flex: 0 1 auto;
  24         flex: 0 1 auto;
  25 }
  26 .vnfConfigPrimitiveContainer {
  27     -ms-flex: 1 0 100%;
  28         flex: 1 0 100%;
  29 }
  30 .vnfrConfigPrimitives {
  31     display: -ms-flexbox;
  32     display: flex;
  33     -ms-flex: 1 1 100%;
  34         flex: 1 1 100%;
  35     /*max-width: 50%;*/
  36     -ms-flex-direction: column;
  37         flex-direction: column;
  38     background: white;
  39     .launchpadCard_title {
  40         -ms-flex: 0 1 auto;
  41             flex: 0 1 auto;
  42         min-height: 1rem;
  43     }
  44     .configuring {
  45         pointer-events: none;
  46         opacity: 0.3;
  47     }
  48     .react-tabs {
  49         display: -ms-flexbox;
  50         display: flex;
  51         -ms-flex: 1 0 auto;
  52             flex: 1 0 auto;
  53
  54         [role=tablist] {
  55             border: 0px;
  56             margin: 0px;
  57             padding-top: 1rem;
  58             display: -ms-flexbox;
  59             display: flex;
  60             -ms-flex: 1 1 40%;
  61                 flex: 1 1 40%;
  62             -ms-flex-direction: column;
  63                 flex-direction: column;
  64             background-color: rgb(221, 221, 221);
  65
  66             [role=tab] {
  67                 padding: 1rem;
  68             }
  69             [role=tab]:hover {
  70                 background-color: #7e9bc1;
  71             }
  72             [role=tab][aria-selected=true] {
  73                 border: 0px;
  74                 border-radius: 0px;
  75                 position: relative;
  76
  77                 &:before {
  78                     display: block;
  79                     position: absolute;
  80                     content: ' ';
  81                     top: -.125rem;
  82                     left: 0rem;
  83                     width: 100%;
  84                     border-top: 1px dashed #00acee;
  85                 }
  86                 &:after {
  87                     display: block;
  88                     position: absolute;
  89                     content: ' ';
  90                     bottom: -.125rem;
  91                     left: 0rem;
  92                     width: 100%;
  93                     border-bottom: 1px dashed #00acee;
  94                 }
  95             }
  96             [role=tab]:focus {
  97                 box-shadow: none;
  98                 border: 0px;
  99             }
 100             [role=tab]:focus:after {
 101                 display: none;
 102             }
 103         }
 104         [role=tabpanel] {
 105             -ms-flex: 1 1 auto;
 106                 flex: 1 1 auto;
 107             margin-top: 1rem;
 108             padding: 1rem;
 109             display: -ms-flexbox;
 110             display: flex;
 111             -ms-flex-direction: column;
 112                 flex-direction: column;
 113             -ms-flex-pack: start;
 114                 justify-content: flex-start;
 115             h2 {
 116                 padding-bottom: 0.5rem;
 117             }
 118             h3 {
 119                 padding: 0.5rem;
 120                 margin-left: 1rem;
 121                 font-weight: bold;
 122             }
 123             .noticeSubText {
 124                 padding-bottom:0.5rem;
 125                 color:$darker-gray;
 126                 font-size:0.75rem;
 127                 &_right {
 128                     text-align:right;
 129                 }
 130             }
 131             .parameterGroup {
 132                 /* margin-left: 2rem;*/
 133                 >li {
 134                 }
 135                 label {
 136                     display: -ms-flexbox;
 137                     display: flex;
 138                     -ms-flex-direction:column;
 139                         flex-direction:column;
 140                     &[data-required="true"] span:after {
 141                         content: '*';
 142                     }
 143                     &.disabled {
 144                     }
 145                     .optional {
 146                         @include optional();
 147                     }
 148                     .readonly {
 149                         -ms-flex: 0 0 30%;
 150                             flex: 0 0 30%;
 151                         height: 1.25rem;
 152                         margin: 0.125rem 0 0.5rem 0;
 153                     }
 154                 }
 155             }
 156             .vnfConfigPrimitiveParameterGroupParameters {
 157                 position:relative;
 158                  margin-bottom:2.5rem;
 159                 div {
 160                     display:-ms-flexbox;
 161                     display:flex;
 162                     -ms-flex-direction:column;
 163                         flex-direction:column;
 164                 }
 165                 .configGroupOverlay {
 166                     background: #ccc;
 167                     position: absolute;
 168                     width: 100%;
 169                     height: 100%;
 170                     opacity: 0.5;
 171                 }
 172                 &:after {
 173                 }
 174             }
 175             .vnfConfigPrimitiveParameters {
 176
 177                 label {
 178                     display: -ms-flexbox;
 179                     display: flex;
 180                     -ms-flex-direction:column;
 181                         flex-direction:column;
 182                     &[data-required="true"] span:after {
 183                         content: '*';
 184                     }
 185                     input, span {
 186                      font-size: 1rem;
 187                         -ms-flex: 1 1 auto;
 188                             flex: 1 1 auto;
 189                     }
 190                     input {
 191                         -ms-flex: 0 0 30%;
 192                             flex: 0 0 30%;
 193                         height: 1.25rem;
 194                         margin: 0.125rem 0 0.5rem 0;
 195                         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #ffffff, 0 1px 0 #ffffff;
 196                     }
 197                     .optional {
 198                         @include optional();
 199                     }
 200                     .readonly {
 201                         -ms-flex: 0 0 30%;
 202                             flex: 0 0 30%;
 203                         height: 1.25rem;
 204                         margin: 0.125rem 0 0.5rem 0;
 205                     }
 206                 }
 207             }
 208             .inputGroup{
 209                 display:-ms-flexbox;
 210                 display:flex;
 211                 -ms-flex:1 1 auto;
 212                     flex:1 1 auto;
 213                 -ms-flex-align:center;
 214                     align-items:center;
 215             }
 216         }
 217         button {
 218             margin-top: 2rem;
 219         }
 220     }
 221 }
 222 .vnfConfigPrimitiveJobList {
 223     -ms-flex: 1 1 80%;
 224         flex: 1 1 80%;
 225
 226     .listView {
 227         padding: 0.1rem;
 228         overflow-y: auto;
 229
 230         >div>div {
 231             margin:0.5rem;
 232             >.tree-view_item {
 233                 padding: 1rem;
 234             }
 235             &:nth-child(odd) {
 236                 background:white;
 237             }
 238         }
 239
 240         .tree-view_children {
 241             margin-left: 2rem;
 242         }
 243     }
 244 }