MC - New style guide for form elements

MC - New style guide for form elements

by pj_js15

HTML

<!-- <div class="form-element-float promotionName-input">
  <input id="promotionName" name="promotionName" class="form-control wid75Per promotion-name" type="text" value="" maxlength="60">
  <div class="error-icon marginT10 promotion-errorIcon" style="display: block;"> <svg width="15" height="15"><use xlink:href="#new-error-icon"></use></svg></div>
  <div class="clear"></div>
  <span class="below-txt error-msg" id="promotionNameError" style="display: block;">Enter a name for the promotion</span>

  <span class="below-txt ref-txt clear-on-tab hidden">
                                                Create a unique name for the promotion.</span>

  <span class="below-txt pull-right v-spacer120px">
                                                Max <span id="promotionNameCount">0</span>/60 characters.</span>

</div>

-->


<!-- 
* element-group
  * label-container
    * label
    * additional text
  * input-element-container
    * input
    * icon-container
       * error-icon
       * tooltip-icon
    * msg-container
       * additional-msg
       * error-msg
-->

<div class="element-group">
  
  <div class="label-container">
    <label>Discount name</label>
    <span class="additional-msg">Enter discount details here for reference.</span>
  </div>
  
  <div class="input-element-container">
    <input id="promotionName" name="promotionName" type="text" value="" />
    <div class="icon-container">
      <span class="error-icon"></span>
      <span class="tooltip-icon"></span>
    </div>
    <div class="msg-container">
      <span class="additional-msg">Max 0/20 characters.</span>
      <span class="error-msg">Enter a name for the promotion.</span>
    </div>
  </div>
  
</div>

CSS

*{
  font-family: Arial;
}

.element-group{
  border: 1px solid gray;
}

.element-group .label-container {
  border: 1px solid lightblue;
  display: inline-block;
  vertical-align: top;
  margin-right: 20px;
  min-width: 250px;
  width: 25%;
}

.msg-container > span,
.label-container > span{
  font-size: 12px;
  color: #999999;
  display: block;
  width: 100%;
}
.msg-container .error-msg{
  color: #EB5757;
}

.element-group .input-element-container{
  display: inline-block;
  border: 1px solid lightblue;
  min-width: 300px;
}

.input-element-container input{
  padding: 10px;
  width: 75%;
  display: inline-block;
}
.input-element-container .icon-container{
  display: inline-block;
  width: 15%;
  vertical-align: middle;
}
.input-element-container .msg-container{
  border: 1px solid red;
  margin-top: 5px;
  width: 82%;
}



.icon-container span{
  display: inline-block;
  width: 15px;
  height: 15px;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: contain;
}

.icon-container span.error-icon{
  background-image: url('https://cdn4.iconfinder.com/data/icons/momenticons-basic/32x32/remove2.png');
}

.icon-container span.tooltip-icon{
  background-image: url('https://cdn4.iconfinder.com/data/icons/momenticons-basic/32x32/infomation.png');
}