designkit-forms

1.2.3

Sass module for css forms at RightScale.

Install

npm i --save designkit-forms

CSS

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: bold;
  color: #57626C;
}

.form-note {
  min-height: 17px;
  margin: 4px 0 2px;
  font-size: 12px;
  color: #76899A;
}

.form-control::-webkit-input-placeholder {
  color: #8d9dab;
  vertical-align: middle;
}

.form-control:-ms-input-placeholder {
  color: #8d9dab;
  vertical-align: middle;
}

.form-control::placeholder {
  color: #8d9dab;
  vertical-align: middle;
}

.form-control,
.form-select {
  min-height: 36px;
  padding: 8px;
  font-size: 13px;
  color: #76899A;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #D1D6DC;
  border-top-color: #cbd1d8;
  border-radius: 2px;
  outline: none;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}

.form-control.focus, .form-control:focus,
.form-select.focus,
.form-select:focus {
  border-color: #97a2b0;
  border-bottom-color: #919dac;
  outline: none;
  box-shadow: none;
}

.form-control[disabled],
.form-control .disabled,
.form-select[disabled],
.form-select .disabled {
  color: #90a0ad;
  background: #F4F5F7;
  border-color: #D1D6DC;
  box-shadow: none;
}

.form-select {
  display: inline-block;
  max-width: 100%;
  padding-right: 24px;
  cursor: pointer;
  background: #fff url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI5cHgiIGhlaWdodD0iNnB4IiB2aWV3Qm94PSIwIDAgOSA2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPiAgICAgICAgPHRpdGxlPkdyb3VwQDJ4PC90aXRsZT4gICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+ICAgIDxkZWZzPjwvZGVmcz4gICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIGZpbGwtcnVsZT0ibm9uemVybyIgZmlsbD0iIzg1OTZBNSI+ICAgICAgICAgICAgPGcgaWQ9ImNhcmV0Ij4gICAgICAgICAgICAgICAgPHBhdGggZD0iTTksMC4yIEM4LjksMC4xIDguOCwwIDguNywwIEwwLjMsMCBDMC4yLDAgMC4xLDAuMSAwLDAuMiBMMCwwLjMgTDAuMSwwLjYgTDQuMyw1LjkgTDQuNSw2IEw0LjcsNS45IEw4LjksMC42IEw5LDAuNCBMOSwwLjIgWiIgaWQ9IlNoYXBlIj48L3BhdGg+ICAgICAgICAgICAgPC9nPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+") no-repeat right 8px center;
  border: 1px solid #D1D6DC;
  box-shadow: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

.form-select[multiple] {
  padding: 8px;
  background: #fff;
}

.input-sm {
  min-height: 26px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 12px;
}

.input-lg {
  padding: 10px;
  font-size: 16px;
}

.input-block {
  display: block;
  width: 100%;
}

.form-checkbox {
  padding-left: 20px;
  margin: 15px 0;
  vertical-align: middle;
}

.form-checkbox label {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.8;
}

.form-checkbox input[type=checkbox],
.form-checkbox input[type=radio] {
  float: left;
  margin: 5px 0 0 -20px;
  vertical-align: middle;
}

.form-checkbox .form-note {
  display: block;
  margin: 0;
  font-size: 12px;
  font-weight: normal;
}

.form-group.errored label {
  color: #C32525;
}

.form-group.errored .form-control,
.form-group.errored .form-select {
  border-color: #C32525;
}

.form-group.errored .form-note {
  color: #C32525;
}

Author

Jason Melgoza

License

MIT

This site is open source. Improve this page.