assets/main/sass/components/_form.scss

   1 ///
   2 /// Editorial 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
  13         label {
  14                 color: _palette(fg-bold);
  15                 display: block;
  16                 font-size: 0.9em;
  17                 font-weight: _font(weight-bold);
  18                 margin: 0 0 (_size(element-margin) * 0.5) 0;
  19         }
  20
  21         input[type="text"],
  22         input[type="password"],
  23         input[type="email"],
  24         input[type="tel"],
  25         input[type="search"],
  26         input[type="url"],
  27         select,
  28         textarea {
  29                 @include vendor('appearance', 'none');
  30                 background: _palette(bg);
  31                 border-radius: _size(border-radius);
  32                 border: none;
  33                 border: solid 1px _palette(border);
  34                 color: inherit;
  35                 display: block;
  36                 outline: 0;
  37                 padding: 0 1em;
  38                 text-decoration: none;
  39                 width: 100%;
  40
  41                 &:invalid {
  42                         box-shadow: none;
  43                 }
  44
  45                 &:focus {
  46                         border-color: _palette(accent);
  47                         box-shadow: 0 0 0 1px _palette(accent);
  48                 }
  49         }
  50
  51         select {
  52                 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>");
  53                 background-size: 1.25em;
  54                 background-repeat: no-repeat;
  55                 background-position: calc(100% - 1em) center;
  56                 height: _size(element-height);
  57                 padding-right: _size(element-height);
  58                 text-overflow: ellipsis;
  59
  60                 option {
  61                         color: _palette(fg-bold);
  62                         background: _palette(bg);
  63                 }
  64
  65                 &:focus {
  66                         &::-ms-value {
  67                                 background-color: transparent;
  68                         }
  69                 }
  70
  71                 &::-ms-expand {
  72                         display: none;
  73                 }
  74         }
  75
  76         input[type="text"],
  77         input[type="password"],
  78         input[type="email"],
  79         input[type="tel"],
  80         input[type="search"],
  81         input[type="url"],
  82         select {
  83                 height: _size(element-height);
  84         }
  85
  86         textarea {
  87                 padding: 0.75em 1em;
  88         }
  89
  90         input[type="checkbox"],
  91         input[type="radio"], {
  92                 @include vendor('appearance', 'none');
  93                 display: block;
  94                 float: left;
  95                 margin-right: -2em;
  96                 opacity: 0;
  97                 width: 1em;
  98                 z-index: -1;
  99
 100                 & + label {
 101                         @include icon;
 102                         color: _palette(fg);
 103                         cursor: pointer;
 104                         display: inline-block;
 105                         font-size: 1em;
 106                         font-weight: _font(weight);
 107                         padding-left: (_size(element-height) * 0.6) + 0.75em;
 108                         padding-right: 0.75em;
 109                         position: relative;
 110
 111                         &:before {
 112                                 background: _palette(bg);
 113                                 border-radius: _size(border-radius);
 114                                 border: solid 1px _palette(border);
 115                                 content: '';
 116                                 display: inline-block;
 117                                 height: (_size(element-height) * 0.6);
 118                                 left: 0;
 119                                 line-height: (_size(element-height) * 0.575);
 120                                 position: absolute;
 121                                 text-align: center;
 122                                 top: 0;
 123                                 width: (_size(element-height) * 0.6);
 124                         }
 125                 }
 126
 127                 &:checked + label {
 128                         &:before {
 129                                 background: _palette(fg-bold);
 130                                 border-color: _palette(fg-bold);
 131                                 color: _palette(bg);
 132                                 content: '\f00c';
 133                         }
 134                 }
 135
 136                 &:focus + label {
 137                         &:before {
 138                                 border-color: _palette(accent);
 139                                 box-shadow: 0 0 0 1px _palette(accent);
 140                         }
 141                 }
 142         }
 143
 144         input[type="checkbox"] {
 145                 & + label {
 146                         &:before {
 147                                 border-radius: _size(border-radius);
 148                         }
 149                 }
 150         }
 151
 152         input[type="radio"] {
 153                 & + label {
 154                         &:before {
 155                                 border-radius: 100%;
 156                         }
 157                 }
 158         }
 159
 160         ::-webkit-input-placeholder {
 161                 color: _palette(fg-light) !important;
 162                 opacity: 1.0;
 163         }
 164
 165         :-moz-placeholder {
 166                 color: _palette(fg-light) !important;
 167                 opacity: 1.0;
 168         }
 169
 170         ::-moz-placeholder {
 171                 color: _palette(fg-light) !important;
 172                 opacity: 1.0;
 173         }
 174
 175         :-ms-input-placeholder {
 176                 color: _palette(fg-light) !important;
 177                 opacity: 1.0;
 178         }