utils/test/reporting/3rd_party/sass/components/_form.scss

   1 ///\r
   2 /// Phantom by HTML5 UP\r
   3 /// html5up.net | @ajlkn\r
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
   5 ///\r
   6 \r
   7 /* Form */\r
   8 \r
   9         form {\r
  10                 margin: (_size(element-margin) * -0.5) 0 _size(element-margin) 0;\r
  11 \r
  12                 &:after {\r
  13                         content: '';\r
  14                         display: block;\r
  15                         clear: both;\r
  16                         height: 1px;\r
  17                 }\r
  18 \r
  19                 .field {\r
  20                         position: relative;\r
  21                         float: left;\r
  22                         margin: 0 0 (_size(element-margin) * 0.65) 0;\r
  23                         vertical-align: top;\r
  24                         width: 100%;\r
  25                 }\r
  26 \r
  27                 .half {\r
  28                         width: calc(50% + #{_size(field-gutter) * 0.5}) !important;\r
  29                         padding-left: _size(field-gutter);\r
  30                 }\r
  31 \r
  32                 .half.first {\r
  33                         width: calc(50% - #{_size(field-gutter) * 0.5}) !important;\r
  34                         padding-left: 0;\r
  35                 }\r
  36 \r
  37                 :last-child {\r
  38                         margin-bottom: 0;\r
  39                 }\r
  40 \r
  41                 .half:nth-last-child(2) {\r
  42                         margin-bottom: 0;\r
  43                 }\r
  44 \r
  45                 .actions {\r
  46                         position: relative;\r
  47                         clear: both;\r
  48                         padding-top: (_size(element-margin) * 0.5);\r
  49                 }\r
  50 \r
  51                 @include breakpoint(xsmall) {\r
  52                         .half {\r
  53                                 width: 100% !important;\r
  54                                 padding-left: 0;\r
  55                         }\r
  56 \r
  57                         .half.first {\r
  58                                 width: 100% !important;\r
  59                                 padding-left: 0;\r
  60                         }\r
  61 \r
  62                         .half:nth-last-child(2) {\r
  63                                 margin: 0 0 (_size(element-margin) * 0.65) 0;\r
  64                         }\r
  65                 }\r
  66         }\r
  67 \r
  68         label {\r
  69                 display: block;\r
  70                 font-size: 0.9em;\r
  71                 font-weight: _font(weight-bold);\r
  72                 margin: 0 0 (_size(element-margin) * 0.5) 0;\r
  73         }\r
  74 \r
  75         input[type="text"],\r
  76         input[type="password"],\r
  77         input[type="email"],\r
  78         input[type="tel"],\r
  79         select,\r
  80         textarea {\r
  81                 @include vendor('appearance', 'none');\r
  82                 background-color: transparent;\r
  83                 border: none;\r
  84                 border-radius: 0;\r
  85                 border-bottom: solid _size(border-width) _palette(border);\r
  86                 color: inherit;\r
  87                 display: block;\r
  88                 outline: 0;\r
  89                 padding: 0;\r
  90                 text-decoration: none;\r
  91                 width: 100%;\r
  92 \r
  93                 &:invalid {\r
  94                         box-shadow: none;\r
  95                 }\r
  96 \r
  97                 &:focus {\r
  98                         border-bottom-color: _palette(accent1);\r
  99                         box-shadow: inset 0 -1px 0 0 _palette(accent1);\r
 100                 }\r
 101         }\r
 102 \r
 103         .select-wrapper {\r
 104                 @include icon;\r
 105                 display: block;\r
 106                 position: relative;\r
 107 \r
 108                 &:before {\r
 109                         color: _palette(border);\r
 110                         content: '\f078';\r
 111                         display: block;\r
 112                         height: _size(element-height);\r
 113                         line-height: _size(element-height);\r
 114                         pointer-events: none;\r
 115                         position: absolute;\r
 116                         right: 0;\r
 117                         text-align: center;\r
 118                         top: 0;\r
 119                         width: _size(element-height);\r
 120                 }\r
 121 \r
 122                 select::-ms-expand {\r
 123                         display: none;\r
 124                 }\r
 125         }\r
 126 \r
 127         input[type="text"],\r
 128         input[type="password"],\r
 129         input[type="email"],\r
 130         select {\r
 131                 height: _size(element-height);\r
 132         }\r
 133 \r
 134         textarea {\r
 135                 padding: 0;\r
 136                 min-height: (_size(element-height) * 1.25);\r
 137         }\r
 138 \r
 139         input[type="checkbox"],\r
 140         input[type="radio"], {\r
 141                 @include vendor('appearance', 'none');\r
 142                 display: block;\r
 143                 float: left;\r
 144                 margin-right: -2em;\r
 145                 opacity: 0;\r
 146                 width: 1em;\r
 147                 z-index: -1;\r
 148 \r
 149                 & + label {\r
 150                         @include icon;\r
 151                         color: _palette(fg);\r
 152                         cursor: pointer;\r
 153                         display: inline-block;\r
 154                         font-size: 1em;\r
 155                         font-weight: _font(weight);\r
 156                         padding-left: (_size(element-height) * 0.6) + 0.75em;\r
 157                         padding-right: 0.75em;\r
 158                         position: relative;\r
 159 \r
 160                         &:before {\r
 161                                 border-radius: _size(border-radius);\r
 162                                 border: solid _size(border-width) _palette(border);\r
 163                                 content: '';\r
 164                                 display: inline-block;\r
 165                                 height: (_size(element-height) * 0.6);\r
 166                                 left: 0;\r
 167                                 line-height: (_size(element-height) * 0.575);\r
 168                                 position: absolute;\r
 169                                 text-align: center;\r
 170                                 top: 0;\r
 171                                 width: (_size(element-height) * 0.6);\r
 172                         }\r
 173                 }\r
 174 \r
 175                 &:checked + label {\r
 176                         &:before {\r
 177                                 background: _palette(fg);\r
 178                                 border-color: _palette(fg);\r
 179                                 color: _palette(bg);\r
 180                                 content: '\f00c';\r
 181                         }\r
 182                 }\r
 183 \r
 184                 &:focus + label {\r
 185                         &:before {\r
 186                                 border-color: _palette(accent1);\r
 187                                 box-shadow: 0 0 0 _size(border-width) _palette(accent1);\r
 188                         }\r
 189                 }\r
 190         }\r
 191 \r
 192         input[type="checkbox"] {\r
 193                 & + label {\r
 194                         &:before {\r
 195                                 border-radius: _size(border-radius);\r
 196                         }\r
 197                 }\r
 198         }\r
 199 \r
 200         input[type="radio"] {\r
 201                 & + label {\r
 202                         &:before {\r
 203                                 border-radius: 100%;\r
 204                         }\r
 205                 }\r
 206         }