Lungo2.0.js/src/stylesheets/css/Lungo.widgets.form.css

/**
 * Stylesheet
 *
 * @namespace Lungo.Widgets
 * @class Form
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */
/* DIMENSIONS */
/* COLORS */
form {
  margin: 3%;
  /* @group search */

}
form.wrapper input:not([type=checkbox]),
form textarea,
form select {
  margin: 3px 0px 3px 0px;
}
form.rounded input:not([type=range]),
form.rounded textarea,
form.rounded select {
  width: 94%;
  padding: 1.0% 3% ;
}
form.rounded input:not([type=range]):first-of-type,
form.rounded textarea:first-of-type,
form.rounded select:first-of-type {
  -webkit-border-radius: 2px 2px 0px 0px;
  -moz-border-radius: 2px 2px 0px 0px;
  border-radius: 2px 2px 0px 0px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
form.rounded input:not([type=range]):last-of-type,
form.rounded textarea:last-of-type,
form.rounded select:last-of-type {
  -webkit-border-radius: 0px 0px 2px 2px;
  -moz-border-radius: 0px 0px 2px 2px;
  border-radius: 0px 0px 2px 2px;
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
form label:not(.select) {
  font-size: 13px;
  margin-bottom: 3px;
  display: block;
}
form input,
form textarea,
form select,
form .progress {
  margin-bottom: 8px;
}
form input:not([type=range]),
form textarea,
form select {
  display: block;
  width: 94%;
  padding: 0 3%;
  height: 30px;
  font-size: 15px;
  line-height: 14px;
  font-weight: bold;
  -webkit-appearance: none;
  -webkit-user-select: text;
  -webkit-font-smoothing: antialiased;
}
form textarea {
  padding-top: 1.5%;
  min-height: 48px;
}
form input[type=search] {
  width: 85%;
  display: inline-block;
}
form input[type=search]  + .button {
  float: right;
  padding: 0px;
  width: 13%;
  height: 30px;
}
form input[type=search]  + .button .icon {
  top: -3px;
  float: none;
}
form select {
  width: 100%;
  height: 30px;
}
form label.select {
  position: relative;
  display: inline-block;
  width: 100%;
}
form .select:after {
  text-align: center;
  position: absolute;
  top: 3px;
  right: 0;
  bottom: 0;
  height: 30px;
  width: 30px;
  content: "▼";
  pointer-events: none;
  line-height: 33px;
}
form .no-pointer-events .select:after {
  content: none;
}
form input[type=range] {
  -webkit-appearance: none;
  outline: none;
}
form input[type=range]:not(.checkbox) {
  height: 12px;
  width: 100%;
  padding: 0px;
  margin-top: 2px;
  border: 0;
  cursor: ew-resize;
}
form input[type=range]:not(.checkbox)::-webkit-slider-thumb {
  top: -1px;
}
form input[type=range].checkbox {
  width: 70px;
  height: 30px;
  padding: 1px 2px;
  font-family: 'lungojsicon';
}
form input[type=range].checkbox:after {
  content: "\0055";
  position: relative;
  float: right;
  top: -23px;
  padding: 0 8px;
  font-size: 1.5em;
}
form input[type=range].checkbox.active:after {
  float: left;
  content: "\0051";
  font-weight: bold;
  font-size: 1.6em;
}
form input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 24px;
  border-radius: 2px;
  position: relative;
  margin: 2px 2px 2px 2px;
  border: none;
}
form input[type=range]::-webkit-slider-thumb::after {
  width: 12px;
  height: 12px;
  display: block;
  content: "";
  position: relative;
  border-radius: 8px;
  z-index: 9;
  top: 6px;
  left: 9px;
}
form .progress {
  width: 100%;
  margin-bottom: 8px;
}
form .progress .labels {
  font-size: 1.0em;
  display: block;
}
form .progress .labels span:last-child {
  float: right;
}
form .progress .bar {
  height: 12px;
  line-height: 12px;
  display: block;
}
form .progress .bar .value {
  display: block;
  height: inherit;
  width: 0%;
  -webkit-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
  -moz-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
  -ms-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
  -o-transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
  transition: width 500ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
form .progress .bar .value .label {
  float: right;
  margin-right: 4px;
  font-size: 0.75em;
}
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  form .custom-select select {
    padding-right: 30px;
  }
}