skyquake/framework/widgets/form_controls/formControls.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
  20 .sqTextInput {
  21     display: -ms-flexbox;
  22     display: flex;
  23     -ms-flex-direction: column;
  24         flex-direction: column;
  25     width: 100%;
  26     margin-bottom:1rem;
  27     -ms-flex-align: start;
  28         align-items: flex-start;
  29     -ms-flex-pack:start;
  30         justify-content:flex-start;
  31     span {
  32         color:$darker-gray;
  33         text-transform:uppercase;
  34     }
  35     input, textarea {
  36         height: 35px;
  37         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.39), 0 -1px 1px #ffffff, 0 1px 0 #ffffff;
  38         font-size: 1rem;
  39         display: block;
  40         background: white !important;
  41         margin: 0;
  42         margin-top: 0.25rem;
  43         padding-left:0.25rem;
  44         min-width:100%;
  45         &[disabled] {
  46             background:#ccc;
  47         }
  48     }
  49     .readonly {
  50         line-height: 35px;
  51         box-shadow:none;
  52         background:none !important;
  53     }
  54     textarea {
  55         -ms-flex-align: stretch;
  56         -ms-grid-row-align: stretch;
  57         align-items: stretch;
  58         border:0px;
  59         height: 100%;
  60     }
  61     &.checkbox {
  62         -ms-flex-direction:row;
  63             flex-direction:row;
  64             -ms-flex-align:center;
  65                 align-items:center;
  66         margin-bottom:0;
  67             >span {
  68                 -ms-flex-order: 1;
  69                     order: 1;
  70                     padding-left:1rem;
  71             }
  72             >input {
  73                 -ms-flex-order: 0;
  74                     order: 0;
  75
  76                     box-shadow:none;
  77                     height:25px;
  78             }
  79     }
  80 }
  81
  82 .sqCheckBox {
  83     display:-ms-flexbox;
  84     display:flex;
  85     label {
  86         display:-ms-flexbox;
  87         display:flex;
  88         -ms-flex-align: center;
  89         align-items: center;
  90         input {
  91             box-shadow: none;
  92             height: auto;
  93             margin: 0 0.25rem;
  94         }
  95     }
  96 }
  97
  98 .FormSection {
  99     &-title {
 100         color: #000;
 101         background: lightgray;
 102         padding: 0.5rem;
 103         border-top: 1px solid #f1f1f1;
 104         border-bottom: 1px solid #f1f1f1;
 105     }
 106     &-body {
 107         padding: 0.5rem 0.75rem;
 108     }
 109     label {
 110         -ms-flex: 1 0;
 111             flex: 1 0;
 112     }
 113     /* label {*/
 114     /*     display: -ms-flexbox;*/
 115     /*     display: flex;*/
 116     /*     -ms-flex-direction: column;*/
 117     /*     flex-direction: column;*/
 118     /*     width: 100%;*/
 119     /*     margin: 0.5rem 0;*/
 120     /*     -ms-flex-align: start;*/
 121     /*     align-items: flex-start;*/
 122     /*     -ms-flex-pack: start;*/
 123     /*     justify-content: flex-start;*/
 124     /* }*/
 125     select {
 126         font-size: 1rem;
 127         min-width: 75%;
 128         height: 35px;
 129     }
 130 }
 131
 132
 133
 134
 135 .InputCollection {
 136     display:-ms-flexbox;
 137     display:flex;
 138     -ms-flex-wrap: nowrap;
 139         flex-wrap: nowrap;
 140     -ms-flex-align: center;
 141         align-items: center;
 142     button {
 143         padding: 0.25rem;
 144         height: 1.5rem;
 145         font-size: 0.75rem;
 146     }
 147     select {
 148         min-width: 100%;
 149     }
 150     margin-bottom:0.5rem;
 151     &-wrapper {
 152
 153     }
 154 }