git.roojs.org Git - ratchet/blob - lib/css/forms.css

   1 /* Forms
   2 -------------------------------------------------- */
   3
   4 /* Force form elements to inherit font styles */
   5 input,
   6 textarea,
   7 button,
   8 select {
   9   font-family: inherit;
  10   font-size: inherit;
  11 }
  12
  13 /* Stretch inputs/textareas to full width and add height to maintain a consistent baseline */
  14 select,
  15 textarea,
  16 input[type="text"],
  17 input[type=search],
  18 input[type="password"],
  19 input[type="datetime"],
  20 input[type="datetime-local"],
  21 input[type="date"],
  22 input[type="month"],
  23 input[type="time"],
  24 input[type="week"],
  25 input[type="number"],
  26 input[type="email"],
  27 input[type="url"],
  28 input[type="tel"],
  29 input[type="color"],
  30 .input-group {
  31   width: 100%;
  32   height: 40px;
  33   padding: 10px;
  34   margin-bottom: 10px;
  35   background: #fff;
  36   border: 1px solid rgba(0, 0, 0, .2);
  37   border-radius: 3px;
  38   box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1);
  39   -webkit-appearance: none;
  40   box-sizing: border-box;
  41 }
  42
  43 /* Fully round search input */
  44 input[type=search] {
  45   height: 34px;
  46   font-size: 14px;
  47   border-radius: 30px;
  48 }
  49
  50 /* Allow text area's height to grow larger than a normal input */
  51 textarea {
  52   height: auto;
  53 }
  54
  55 /* Style select button to look like part of the Ratchet's style */
  56 select {
  57   height: auto;
  58   font-size: 14px;
  59   background-color: #f8f8f8;
  60   background-image: -webkit-linear-gradient(top, #f8f8f8 0%, #d4d4d4 100%);
  61   background-image: linear-gradient(to bottom, #f8f8f8 0%, #d4d4d4 100%);
  62   box-shadow: inset 0 1px 1px rgba(0, 0, 0, .1);
  63 }
  64
  65
  66 /* Input groups (cluster multiple inputs together into a single group)
  67 -------------------------------------------------- */
  68
  69 /* Reset from initial form setup styles */
  70 .input-group {
  71   width: auto;
  72   height: auto;
  73   padding: 0;
  74 }
  75
  76 /* Remove spacing, borders, shadows and rounding since it all belongs on the .input-group not the input */
  77 .input-group input {
  78   margin-bottom: 0;
  79   background-color: transparent;
  80   border: 0;
  81   border-bottom: 1px solid rgba(0, 0, 0, .2);
  82   border-radius: 0;
  83   box-shadow: none;
  84 }
  85
  86 /* Remove bottom border on last input to avoid double bottom border */
  87 .input-group input:last-child {
  88   border-bottom-width: 0;
  89 }
  90
  91 /* Input groups with labels
  92 -------------------------------------------------- */
  93
  94 /* To use labels with input groups, wrap a label and an input in an .input-row */
  95 .input-row {
  96   overflow: hidden;
  97   border-bottom: 1px solid rgba(0, 0, 0, .2);
  98 }
  99
 100 /* Remove bottom border on last input-row to avoid double bottom border */
 101 .input-row:last-child {
 102   border-bottom-width: 0;
 103 }
 104
 105 /* Labels get floated left with a set percentage width */
 106 .input-row label {
 107   float: left;
 108   width: 25%;
 109   padding: 11px 10px 9px 13px; /* Optimizing the baseline for mobile. */
 110   font-weight: bold;
 111 }
 112
 113 /* Actual inputs float to right of labels and also have a set percentage */
 114 .input-row label + input {
 115   float: right;
 116   width: 65%;
 117   padding-left: 0;
 118   margin-bottom: 0;
 119   border-bottom: 0;
 120 }