assets/sass/components/_form.scss

   1 ///
   2 /// Forty by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Form */
   8
   9         form {
  10                 margin: 0 0 _size(element-margin) 0;
  11
  12                 > :last-child {
  13                         margin-bottom: 0;
  14                 }
  15
  16                 > .fields  {
  17                         $gutter: (_size(element-margin) * 0.75);
  18
  19                         @include vendor('display', 'flex');
  20                         @include vendor('flex-wrap', 'wrap');
  21                         width: calc(100% + #{$gutter * 2});
  22                         margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
  23
  24                         > .field {
  25                                 @include vendor('flex-grow', '0');
  26                                 @include vendor('flex-shrink', '0');
  27                                 padding: $gutter 0 0 $gutter;
  28                                 width: calc(100% - #{$gutter * 1});
  29
  30                                 &.half {
  31                                         width: calc(50% - #{$gutter * 0.5});
  32                                 }
  33
  34                                 &.third {
  35                                         width: calc(#{100% / 3} - #{$gutter * (1 / 3)});
  36                                 }
  37
  38                                 &.quarter {
  39                                         width: calc(25% - #{$gutter * 0.25});
  40                                 }
  41                         }
  42                 }
  43
  44                 @include breakpoint('<=xsmall') {
  45                         > .fields {
  46                                 $gutter: (_size(element-margin) * 0.75);
  47
  48                                 width: calc(100% + #{$gutter * 2});
  49                                 margin: ($gutter * -1) 0 _size(element-margin) ($gutter * -1);
  50
  51                                 > .field {
  52                                         padding: $gutter 0 0 $gutter;
  53                                         width: calc(100% - #{$gutter * 1});
  54
  55                                         &.half {
  56                                                 width: calc(100% - #{$gutter * 1});
  57                                         }
  58
  59                                         &.third {
  60                                                 width: calc(100% - #{$gutter * 1});
  61                                         }
  62
  63                                         &.quarter {
  64                                                 width: calc(100% - #{$gutter * 1});
  65                                         }
  66                                 }
  67                         }
  68                 }
  69         }
  70
  71         label {
  72                 color: _palette(fg-bold);
  73                 display: block;
  74                 font-size: 0.8em;
  75                 font-weight: _font(weight-bold);
  76                 letter-spacing: _font(letter-spacing-alt);
  77                 margin: 0 0 (_size(element-margin) * 0.5) 0;
  78                 text-transform: uppercase;
  79         }
  80
  81         input[type="text"],
  82         input[type="password"],
  83         input[type="email"],
  84         input[type="tel"],
  85         input[type="search"],
  86         input[type="url"],
  87         select,
  88         textarea {
  89                 @include vendor('appearance', 'none');
  90                 background: _palette(border-bg);
  91                 border: none;
  92                 border-radius: 0;
  93                 color: inherit;
  94                 display: block;
  95                 outline: 0;
  96                 padding: 0 1em;
  97                 text-decoration: none;
  98                 width: 100%;
  99
 100                 &:invalid {
 101                         box-shadow: none;
 102                 }
 103
 104                 &:focus {
 105                         border-color: _palette(highlight);
 106                         box-shadow: 0 0 0 2px _palette(highlight);
 107                 }
 108         }
 109
 110         select {
 111                 background-image: svg-url("<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'><path d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='#{_palette(border)}' /></svg>");
 112                 background-size: 1.25rem;
 113                 background-repeat: no-repeat;
 114                 background-position: calc(100% - 1rem) center;
 115                 height: _size(element-height);
 116                 padding-right: _size(element-height);
 117                 text-overflow: ellipsis;
 118
 119                 option {
 120                         color: _palette(fg-bold);
 121                         background: _palette(bg);
 122                 }
 123
 124                 &:focus {
 125                         &::-ms-value {
 126                                 background-color: transparent;
 127                         }
 128                 }
 129
 130                 &::-ms-expand {
 131                         display: none;
 132                 }
 133         }
 134
 135         input[type="text"],
 136         input[type="password"],
 137         input[type="email"],
 138         input[type="tel"],
 139         input[type="search"],
 140         input[type="url"],
 141         select {
 142                 height: _size(element-height);
 143         }
 144
 145         textarea {
 146                 padding: 0.75em 1em;
 147         }
 148
 149         input[type="checkbox"],
 150         input[type="radio"], {
 151                 @include vendor('appearance', 'none');
 152                 display: block;
 153                 float: left;
 154                 margin-right: -2em;
 155                 opacity: 0;
 156                 width: 1em;
 157                 z-index: -1;
 158
 159                 & + label {
 160                         @include icon(false, solid);
 161                         color: _palette(fg);
 162                         cursor: pointer;
 163                         display: inline-block;
 164                         font-weight: _font(weight);
 165                         padding-left: (_size(element-height) * 0.6) + 1em;
 166                         padding-right: 0.75em;
 167                         position: relative;
 168
 169                         &:before {
 170                                 background: _palette(border-bg);
 171                                 content: '';
 172                                 display: inline-block;
 173                                 font-size: 0.8em;
 174                                 height: (_size(element-height) * 0.75);
 175                                 left: 0;
 176                                 letter-spacing: 0;
 177                                 line-height: (_size(element-height) * 0.75);
 178                                 position: absolute;
 179                                 text-align: center;
 180                                 top: 0;
 181                                 width: (_size(element-height) * 0.75);
 182                         }
 183                 }
 184
 185                 &:checked + label {
 186                         &:before {
 187                                 background: _palette(fg-bold);
 188                                 border-color: _palette(highlight);
 189                                 content: '\f00c';
 190                                 color: _palette(bg);
 191                         }
 192                 }
 193
 194                 &:focus + label {
 195                         &:before {
 196                                 box-shadow: 0 0 0 2px _palette(highlight);
 197                         }
 198                 }
 199         }
 200
 201         input[type="checkbox"] {
 202                 & + label {
 203                         &:before {
 204                         }
 205                 }
 206         }
 207
 208         input[type="radio"] {
 209                 & + label {
 210                         &:before {
 211                                 border-radius: 100%;
 212                         }
 213                 }
 214         }
 215
 216         ::-webkit-input-placeholder {
 217                 color: _palette(fg-light) !important;
 218                 opacity: 1.0;
 219         }
 220
 221         :-moz-placeholder {
 222                 color: _palette(fg-light) !important;
 223                 opacity: 1.0;
 224         }
 225
 226         ::-moz-placeholder {
 227                 color: _palette(fg-light) !important;
 228                 opacity: 1.0;
 229         }
 230
 231         :-ms-input-placeholder {
 232                 color: _palette(fg-light) !important;
 233                 opacity: 1.0;
 234         }