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     .invalid {
  81         color: red;
  82         font-weight:strong;
  83     }
  84      input:invalid {
  85         border: 2px solid red;
  86         &:after {
  87             content: 'Invalid Value'
  88         }
  89     }
  90 }
  91
  92 .sqCheckBox {
  93     display:-ms-flexbox;
  94     display:flex;
  95     label {
  96         display:-ms-flexbox;
  97         display:flex;
  98         -ms-flex-align: center;
  99         align-items: center;
 100         input {
 101             box-shadow: none;
 102             height: auto;
 103             margin: 0 0.25rem;
 104         }
 105     }
 106 }
 107
 108 .FormSection {
 109     &-title {
 110         color: #000;
 111         background: lightgray;
 112         padding: 0.5rem;
 113         border-top: 1px solid #f1f1f1;
 114         border-bottom: 1px solid #f1f1f1;
 115     }
 116     &-body {
 117         padding: 0.5rem 0.75rem;
 118     }
 119     label {
 120         -ms-flex: 1 0;
 121             flex: 1 0;
 122     }
 123     /* label {*/
 124     /*     display: -ms-flexbox;*/
 125     /*     display: flex;*/
 126     /*     -ms-flex-direction: column;*/
 127     /*     flex-direction: column;*/
 128     /*     width: 100%;*/
 129     /*     margin: 0.5rem 0;*/
 130     /*     -ms-flex-align: start;*/
 131     /*     align-items: flex-start;*/
 132     /*     -ms-flex-pack: start;*/
 133     /*     justify-content: flex-start;*/
 134     /* }*/
 135     select {
 136         font-size: 1rem;
 137         min-width: 75%;
 138         height: 35px;
 139     }
 140 }
 141
 142
 143
 144
 145 .InputCollection {
 146     display:-ms-flexbox;
 147     display:flex;
 148     -ms-flex-wrap: nowrap;
 149         flex-wrap: nowrap;
 150     -ms-flex-align: center;
 151         align-items: center;
 152     button {
 153         padding: 0.25rem;
 154         height: 1.5rem;
 155         font-size: 0.75rem;
 156     }
 157     select {
 158         min-width: 100%;
 159     }
 160     margin-bottom:0.5rem;
 161     &-wrapper {
 162
 163     }
 164 }