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