designkit-forms

    1.2.3 • Public • Published

    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

    Install

    npm i designkit-forms

    DownloadsWeekly Downloads

    115

    Version

    1.2.3

    License

    MIT

    Unpacked Size

    16.3 kB

    Total Files

    8

    Last publish

    Collaborators

    • jasonmelgoza