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