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