assets/main/sass/components/_form.scss

   1 ///
   2 /// Massively 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                 display: block;
  73                 font-family: _font(family-heading);
  74                 font-weight: _font(weight-heading);
  75                 line-height: 1.5;
  76                 letter-spacing: 0.075em;
  77                 font-size: 0.8rem;
  78                 text-transform: uppercase;
  79                 margin: 0 0 (_size(element-margin) * 0.375) 0;
  80
  81                 @include breakpoint('<=medium') {
  82                         font-size: 0.9rem;
  83                 }
  84         }
  85
  86         input[type="text"],
  87         input[type="password"],
  88         input[type="email"],
  89         select,
  90         textarea {
  91                 @include vendor('appearance', 'none');
  92                 background: transparent;
  93                 border-radius: 0;
  94                 border: solid 2px;
  95                 color: inherit;
  96                 display: block;
  97                 outline: 0;
  98                 padding: 0 1rem;
  99                 text-decoration: none;
 100                 width: 100%;
 101
 102                 &:invalid {
 103                         box-shadow: none;
 104                 }
 105         }
 106
 107         select {
 108                 background-size: 1.25rem;
 109                 background-repeat: no-repeat;
 110                 background-position: calc(100% - 1rem) center;
 111                 height: _size(element-height);
 112                 padding-right: _size(element-height);
 113                 text-overflow: ellipsis;
 114
 115                 &:focus {
 116                         &::-ms-value {
 117                                 background-color: transparent;
 118                         }
 119                 }
 120
 121                 &::-ms-expand {
 122                         display: none;
 123                 }
 124         }
 125
 126         input[type="text"],
 127         input[type="password"],
 128         input[type="email"],
 129         select {
 130                 height: _size(element-height);
 131         }
 132
 133         textarea {
 134                 padding: 0.75rem 1rem;
 135         }
 136
 137         input[type="checkbox"],
 138         input[type="radio"], {
 139                 @include vendor('appearance', 'none');
 140                 display: block;
 141                 float: left;
 142                 margin-right: -2rem;
 143                 opacity: 0;
 144                 width: 1rem;
 145                 z-index: -1;
 146
 147                 & + label {
 148                         @include icon;
 149                         cursor: pointer;
 150                         display: inline-block;
 151                         font-size: 1rem;
 152                         letter-spacing: 0;
 153                         font-family: _font(family);
 154                         text-transform: none;
 155                         font-weight: _font(weight);
 156                         padding-left: (_size(element-height) * 0.6) + 1rem;
 157                         padding-right: 1rem;
 158                         position: relative;
 159
 160                         &:before {
 161                                 border-radius: 0;
 162                                 border: solid 2px;
 163                                 content: '';
 164                                 display: inline-block;
 165                                 height: (_size(element-height) * 0.6);
 166                                 left: 0;
 167                                 line-height: (_size(element-height) * 0.575);
 168                                 position: absolute;
 169                                 text-align: center;
 170                                 top: -0.125rem;
 171                                 width: (_size(element-height) * 0.6);
 172                         }
 173                 }
 174
 175                 &:checked + label {
 176                         &:before {
 177                                 content: '\f00c';
 178                         }
 179                 }
 180         }
 181
 182         input[type="checkbox"] {
 183                 & + label {
 184                         &:before {
 185                                 border-radius: 0;
 186                         }
 187                 }
 188         }
 189
 190         input[type="radio"] {
 191                 & + label {
 192                         &:before {
 193                                 border-radius: 100%;
 194                         }
 195                 }
 196         }
 197
 198         ::-webkit-input-placeholder {
 199                 opacity: 1.0;
 200         }
 201
 202         :-moz-placeholder {
 203                 opacity: 1.0;
 204         }
 205
 206         ::-moz-placeholder {
 207                 opacity: 1.0;
 208         }
 209
 210         :-ms-input-placeholder {
 211                 opacity: 1.0;
 212         }
 213
 214         @mixin color-form($p: null) {
 215                 label {
 216                         color: _palette($p, fg-bold);
 217                 }
 218
 219                 input[type="text"],
 220                 input[type="password"],
 221                 input[type="email"],
 222                 select,
 223                 textarea {
 224                         border-color: _palette($p, border);
 225
 226                         &:focus {
 227                                 border-color: _palette($p, accent);
 228                         }
 229                 }
 230
 231                 select {
 232                         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($p, border)}' /></svg>");
 233
 234                         option {
 235                                 background-color: _palette($p, bg);
 236                                 color: _palette($p, fg);
 237                         }
 238                 }
 239
 240                 .select-wrapper {
 241                         &:before {
 242                                 color: _palette($p, border);
 243                         }
 244                 }
 245
 246                 input[type="checkbox"],
 247                 input[type="radio"], {
 248                         & + label {
 249                                 color: _palette($p, fg);
 250
 251                                 &:before {
 252                                         border-color: _palette($p, border);
 253                                 }
 254                         }
 255
 256                         &:checked + label {
 257                                 &:before {
 258                                         background-color: _palette($p, fg-bold);
 259                                         border-color: _palette($p, fg-bold);
 260                                         color: _palette($p, bg);
 261                                 }
 262                         }
 263
 264                         &:focus + label {
 265                                 &:before {
 266                                         border-color: _palette($p, accent);
 267                                 }
 268                         }
 269                 }
 270
 271                 ::-webkit-input-placeholder {
 272                         color: _palette($p, fg-light) !important;
 273                 }
 274
 275                 :-moz-placeholder {
 276                         color: _palette($p, fg-light) !important;
 277                 }
 278
 279                 ::-moz-placeholder {
 280                         color: _palette($p, fg-light) !important;
 281                 }
 282
 283                 :-ms-input-placeholder {
 284                         color: _palette($p, fg-light) !important;
 285                 }
 286
 287                 .formerize-placeholder {
 288                         color: _palette($p, fg-light) !important;
 289                 }
 290         }
 291
 292         @include color-form;