├── .gitignore ├── LICENSE ├── README.md ├── bulma-material-form.css ├── demo.gif ├── package.json └── src └── main.sass /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | node_modules 3 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 İsmail Demirbilek 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # bulma-material-form 2 | Material Design Form Elements for Bulma (CSS only). 3 | 4 | ### Demo 5 | ![demo](demo.gif) 6 | 7 | ### Install 8 | ```bash 9 | $ npm i -S bulma-material-form 10 | ``` 11 | or [download](https://github.com/dbtek/bulma-material-form/releases). 12 | 13 | ### Author 14 | İsmail Demirbilek - [@dbtek](https://twitter.com/dbtek) 15 | 16 | ### License 17 | MIT 18 | -------------------------------------------------------------------------------- /bulma-material-form.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /** 3 | * Material Design Form Elements for Bulma CSS Framework 4 | * İsmail Demirbilek 5 | * (c) 2017 - MIT 6 | * Based on http://s.codepen.io/jonnitto/pen/OVmvPB by Jon Uhlmann 7 | */ 8 | .radio-control, 9 | .control { 10 | position: relative; 11 | margin-top: 2.25rem; 12 | margin-bottom: 2.25rem; } 13 | 14 | .form-inline > .control, 15 | .form-inline > .btn { 16 | display: inline-block; 17 | margin-bottom: 0; } 18 | 19 | .form-help { 20 | margin-top: 0.125rem; 21 | margin-left: 0.125rem; 22 | color: #949494; 23 | font-size: 0.8rem; } 24 | .checkbox-control .form-help, .radio-control .form-help, .control .form-help { 25 | position: absolute; 26 | width: 100%; } 27 | .checkbox-control .form-help { 28 | position: relative; 29 | margin-bottom: 1rem; } 30 | .radio-control .form-help { 31 | padding-top: 0.25rem; 32 | margin-top: -1rem; } 33 | 34 | .control input { 35 | height: 1.9rem; } 36 | .control textarea { 37 | resize: none; } 38 | .control select { 39 | width: 100%; 40 | font-size: 1rem; 41 | height: 1.6rem; 42 | padding: 0.125rem 0.125rem 0.0625rem; 43 | background: none; 44 | border: none; 45 | line-height: 1.6; 46 | box-shadow: none; } 47 | .control .label { 48 | position: absolute; 49 | top: 0.25rem; 50 | pointer-events: none; 51 | padding-left: 0.125rem; 52 | z-index: 1; 53 | color: #949494; 54 | font-size: 1rem; 55 | font-weight: normal; 56 | transition: all 0.38s ease; } 57 | .control .bar { 58 | position: relative; 59 | border-bottom: 0.0625rem solid #7a7a7a; 60 | display: block; } 61 | .control .bar::before { 62 | content: ""; 63 | height: 0.125rem; 64 | width: 0; 65 | left: 50%; 66 | bottom: -0.0625rem; 67 | position: absolute; 68 | background: #00d1b2; 69 | transition: left 0.38s ease, width 0.38s ease; 70 | z-index: 2; } 71 | .control input, 72 | .control textarea { 73 | display: block; 74 | background: none; 75 | padding: 0.125rem 0.125rem 0.0625rem; 76 | font-size: 1rem; 77 | border-width: 0; 78 | border-color: transparent; 79 | line-height: 1.9; 80 | width: 100%; 81 | color: transparent; 82 | transition: all 0.38s ease; 83 | box-shadow: none; } 84 | .control input[type="file"] { 85 | line-height: 1; } 86 | .control input[type="file"] ~ .bar { 87 | display: none; } 88 | .control select, 89 | .control input:focus, 90 | .control input:valid, 91 | .control input.form-file, 92 | .control input.has-value, 93 | .control textarea:focus, 94 | .control textarea:valid, 95 | .control textarea.form-file, 96 | .control textarea.has-value { 97 | color: #4a4a4a; } 98 | .control select ~ .label, 99 | .control input:focus ~ .label, 100 | .control input:valid ~ .label, 101 | .control input.form-file ~ .label, 102 | .control input.has-value ~ .label, 103 | .control textarea:focus ~ .label, 104 | .control textarea:valid ~ .label, 105 | .control textarea.form-file ~ .label, 106 | .control textarea.has-value ~ .label { 107 | font-size: 0.8rem; 108 | color: #616161; 109 | top: -1rem; 110 | left: 0; } 111 | .control select:focus, 112 | .control input:focus, 113 | .control textarea:focus { 114 | outline: none; } 115 | .control select:focus ~ .label, 116 | .control input:focus ~ .label, 117 | .control textarea:focus ~ .label { 118 | color: #00d1b2; } 119 | .control select:focus ~ .bar::before, 120 | .control input:focus ~ .bar::before, 121 | .control textarea:focus ~ .bar::before { 122 | width: 100%; 123 | left: 0; } 124 | 125 | .checkbox-control label, 126 | .radio-control label { 127 | position: relative; 128 | cursor: pointer; 129 | padding-left: 2rem; 130 | text-align: left; 131 | color: #4a4a4a; 132 | display: block; } 133 | .checkbox-control input, 134 | .radio-control input { 135 | width: auto; 136 | opacity: 0; 137 | position: absolute; 138 | left: 0; } 139 | 140 | .radio-control { 141 | margin-bottom: 1rem; } 142 | .radio-control .helper { 143 | position: absolute; 144 | top: -0.25rem; 145 | left: -0.25rem; 146 | cursor: pointer; 147 | display: block; 148 | font-size: 1rem; 149 | user-select: none; 150 | color: #7a7a7a; } 151 | .radio-control .helper::before, .radio-control .helper::after { 152 | content: ""; 153 | position: absolute; 154 | left: 0; 155 | top: 0; 156 | margin: 0.25rem; 157 | width: 1rem; 158 | height: 1rem; 159 | transition: transform 0.38s ease; 160 | border-radius: 50%; 161 | border: 0.125rem solid currentColor; } 162 | .radio-control .helper::after { 163 | transform: scale(0); 164 | background-color: #00d1b2; 165 | border-color: #00d1b2; } 166 | .radio-control label:hover .helper { 167 | color: #00d1b2; } 168 | .radio-control input:checked ~ .helper::after { 169 | transform: scale(0.5); } 170 | .radio-control input:checked ~ .helper::before { 171 | color: #00d1b2; } 172 | 173 | .checkbox-control { 174 | margin-top: 3rem; 175 | margin-bottom: 1rem; } 176 | .checkbox-control .helper { 177 | color: #7a7a7a; 178 | position: absolute; 179 | top: 0; 180 | left: 0; 181 | width: 1rem; 182 | height: 1rem; 183 | z-index: 0; 184 | border: 0.125rem solid currentColor; 185 | border-radius: 0.0625rem; 186 | transition: border-color 0.38s ease; } 187 | .checkbox-control .helper::before, .checkbox-control .helper::after { 188 | position: absolute; 189 | height: 0; 190 | width: 0.2rem; 191 | background-color: #00d1b2; 192 | display: block; 193 | transform-origin: left top; 194 | border-radius: 0.25rem; 195 | content: ""; 196 | transition: opacity 0.38s ease, height 0s linear 0.38s; 197 | opacity: 0; } 198 | .checkbox-control .helper::before { 199 | top: 0.65rem; 200 | left: 0.38rem; 201 | transform: rotate(-135deg); } 202 | .checkbox-control .helper::after { 203 | top: 0.3rem; 204 | left: 0; 205 | transform: rotate(-45deg); } 206 | .checkbox-control label:hover .helper { 207 | color: #00d1b2; } 208 | .checkbox-control input:checked ~ .helper { 209 | color: #00d1b2; } 210 | .checkbox-control input:checked ~ .helper::after, .checkbox-control input:checked ~ .helper::before { 211 | opacity: 1; 212 | transition: height 0.38s ease; } 213 | .checkbox-control input:checked ~ .helper::after { 214 | height: 0.5rem; } 215 | .checkbox-control input:checked ~ .helper::before { 216 | height: 1.2rem; 217 | transition-delay: 0.38s; } 218 | 219 | .radio-control + .radio-control, 220 | .checkbox-control + .checkbox-control { 221 | margin-top: 1rem; } 222 | 223 | .has-error .legend.legend, .has-error.control .label.label { 224 | color: #ff3860; } 225 | .has-error.control .form-help, 226 | .has-error.control .helper, .has-error.checkbox-control .form-help, 227 | .has-error.checkbox-control .helper, .has-error.radio-control .form-help, 228 | .has-error.radio-control .helper, .has-error.radio-control .form-help, 229 | .has-error.radio-control .helper { 230 | color: #ff3860; } 231 | .has-error .bar::before { 232 | background: #ff3860; 233 | left: 0; 234 | width: 100%; } 235 | -------------------------------------------------------------------------------- /demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dbtek/bulma-material-form/77696fdb087fe456c6f4a095cbaf8f9d0fd286eb/demo.gif -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bulma-material-form", 3 | "version": "0.1.0", 4 | "description": "Material design form elements for Bulma.", 5 | "main": "src/main.sass", 6 | "scripts": { 7 | "test": "echo \"No test specified\" && exit 1", 8 | "build": "sass src/main.sass > bulma-material-form.css" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/dbtek/bulma-material-form.git" 13 | }, 14 | "keywords": [ 15 | "material", 16 | "design", 17 | "form", 18 | "bulma", 19 | "css" 20 | ], 21 | "author": "İsmail Demirbilek ", 22 | "license": "MIT", 23 | "bugs": { 24 | "url": "https://github.com/dbtek/bulma-material-form/issues" 25 | }, 26 | "homepage": "https://github.com/dbtek/bulma-material-form#readme", 27 | "devDependencies": { 28 | "bulma": "^0.3.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/main.sass: -------------------------------------------------------------------------------- 1 | @import "../node_modules/bulma/sass/utilities/variables" 2 | 3 | /** 4 | * Material Design Form Elements for Bulma CSS Framework 5 | * İsmail Demirbilek 6 | * (c) 2017 - MIT 7 | * Based on http://s.codepen.io/jonnitto/pen/OVmvPB by Jon Uhlmann 8 | */ 9 | // Font Sizes 10 | $mf-font-size: 1rem !default 11 | $mf-active-font-size: $mf-font-size * 0.8 !default 12 | $mf-active-top: -$mf-font-size !default 13 | 14 | // Shadows 15 | $shadow-inset: inset 0 2px 2px 0 rgba(0, 0, 0, 0.14) 16 | $shadow-0: 0 0 1px rgba(0, 0, 0, 0) 17 | $shadow-2: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12) 18 | $shadow-3: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12) 19 | $shadow-4: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2) 20 | $shadow-6: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2) 21 | $shadow-8: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2) 22 | 23 | // Margin & Paddings 24 | $mf-gap: $mf-font-size * 1.5 !default 25 | $mf-spacer: $mf-font-size / 8 !default 26 | $mf-fieldset-margin: 0 0 ($mf-gap * 2) !default 27 | $mf-checkbox-gap: $mf-font-size * 2 !default 28 | $mf-checkbox-top: 0 !default 29 | $mf-radio-margin: $mf-font-size / -4 !default 30 | 31 | // Colors 32 | $mf-input-color: $text !default 33 | $mf-border-color: $grey !default 34 | $mf-label-color: lighten($mf-border-color, 10%) !default 35 | $mf-active-color: darken($mf-border-color, 10%) !default 36 | $mf-focus-color: $primary !default 37 | $mf-error-color: $danger !default 38 | 39 | // Animation 40 | $mf-transition-speed: 0.38s !default 41 | 42 | .radio-control, 43 | .control 44 | position: relative 45 | margin-top: $mf-gap * 1.5 46 | margin-bottom: $mf-gap * 1.5 47 | 48 | .form-inline 49 | > .control, 50 | > .btn 51 | display: inline-block 52 | margin-bottom: 0 53 | 54 | .form-help 55 | margin-top: $mf-spacer 56 | margin-left: $mf-spacer 57 | color: $mf-label-color 58 | font-size: $mf-active-font-size 59 | 60 | .checkbox-control &, 61 | .radio-control &, 62 | .control & 63 | position: absolute 64 | width: 100% 65 | 66 | .checkbox-control & 67 | position: relative 68 | margin-bottom: $mf-font-size 69 | 70 | .radio-control & 71 | padding-top: $mf-spacer * 2 72 | margin-top: -$mf-font-size 73 | 74 | .control 75 | // scss-lint:disable QualifyingElement, NestingDepth 76 | input 77 | height: $mf-font-size * 1.9 78 | 79 | textarea 80 | resize: none 81 | 82 | select 83 | width: 100% 84 | font-size: $mf-font-size 85 | height: $mf-font-size * 1.6 86 | padding: $mf-spacer $mf-spacer ($mf-spacer / 2) 87 | background: none 88 | border: none 89 | line-height: 1.6 90 | box-shadow: none 91 | 92 | .label 93 | position: absolute 94 | top: $mf-font-size / 4 95 | pointer-events: none 96 | padding-left: $mf-spacer 97 | z-index: 1 98 | color: $mf-label-color 99 | font-size: $mf-font-size 100 | font-weight: normal 101 | transition: all $mf-transition-speed ease 102 | 103 | .bar 104 | position: relative 105 | border-bottom: ($mf-font-size / 16) solid $mf-border-color 106 | display: block 107 | 108 | &::before 109 | content: '' 110 | height: $mf-font-size / 8 111 | width: 0 112 | left: 50% 113 | bottom: $mf-font-size / -16 114 | position: absolute 115 | background: $mf-focus-color 116 | transition: left $mf-transition-speed ease, width $mf-transition-speed ease 117 | z-index: 2 118 | 119 | input, 120 | textarea 121 | display: block 122 | background: none 123 | padding: $mf-spacer $mf-spacer ($mf-spacer / 2) 124 | font-size: $mf-font-size 125 | border-width: 0 126 | border-color: transparent 127 | line-height: 1.9 128 | width: 100% 129 | color: transparent 130 | transition: all $mf-transition-speed ease 131 | box-shadow: none 132 | 133 | input[type="file"] 134 | line-height: 1 135 | 136 | ~ .bar 137 | display: none 138 | 139 | select, 140 | input:focus, 141 | input:valid, 142 | input.form-file, 143 | input.has-value, 144 | textarea:focus, 145 | textarea:valid, 146 | textarea.form-file, 147 | textarea.has-value 148 | color: $mf-input-color 149 | 150 | ~ .label 151 | font-size: $mf-active-font-size 152 | color: $mf-active-color 153 | top: $mf-active-top 154 | left: 0 155 | 156 | select, 157 | input, 158 | textarea 159 | &:focus 160 | outline: none 161 | 162 | ~ .label 163 | color: $mf-focus-color 164 | 165 | ~ .bar 166 | &::before 167 | width: 100% 168 | left: 0 169 | 170 | // Radio & Checkbox 171 | .checkbox-control, 172 | .radio-control 173 | label 174 | position: relative 175 | cursor: pointer 176 | padding-left: $mf-checkbox-gap 177 | text-align: left 178 | color: $mf-input-color 179 | display: block 180 | 181 | input 182 | width: auto 183 | opacity: 0.00000001 184 | position: absolute 185 | left: 0 186 | 187 | .radio-control 188 | margin-bottom: $mf-font-size 189 | 190 | .helper 191 | position: absolute 192 | top: $mf-radio-margin 193 | left: $mf-radio-margin 194 | cursor: pointer 195 | display: block 196 | font-size: $mf-font-size 197 | user-select: none 198 | color: $mf-border-color 199 | 200 | &::before, 201 | &::after 202 | content: '' 203 | position: absolute 204 | left: 0 205 | top: 0 206 | margin: $mf-spacer * 2 207 | width: $mf-font-size 208 | height: $mf-font-size 209 | transition: transform $mf-transition-speed ease 210 | border-radius: 50% 211 | border: ($mf-font-size / 8) solid currentColor 212 | 213 | &::after 214 | transform: scale(0) 215 | background-color: $mf-focus-color 216 | border-color: $mf-focus-color 217 | 218 | label:hover .helper 219 | color: $mf-focus-color 220 | 221 | // scss-lint:disable QualifyingElement, NestingDepth 222 | input:checked 223 | ~ .helper 224 | &::after 225 | transform: scale(0.5) 226 | 227 | &::before 228 | color: $mf-focus-color 229 | 230 | .checkbox-control 231 | // scss-lint:disable QualifyingElement 232 | 233 | margin-top: $mf-gap * 2 234 | margin-bottom: $mf-font-size 235 | 236 | .helper 237 | color: $mf-border-color 238 | position: absolute 239 | top: $mf-checkbox-top 240 | left: 0 241 | width: $mf-font-size 242 | height: $mf-font-size 243 | z-index: 0 244 | border: ($mf-font-size / 8) solid currentColor 245 | border-radius: $mf-font-size / 16 246 | transition: border-color $mf-transition-speed ease 247 | 248 | &::before, 249 | &::after 250 | position: absolute 251 | height: 0 252 | width: $mf-font-size * 0.2 253 | background-color: $mf-focus-color 254 | display: block 255 | transform-origin: left top 256 | border-radius: $mf-font-size / 4 257 | content: '' 258 | transition: opacity $mf-transition-speed ease, height 0s linear $mf-transition-speed 259 | opacity: 0 260 | 261 | &::before 262 | top: $mf-font-size * 0.65 263 | left: $mf-font-size * 0.38 264 | transform: rotate(-135deg) 265 | 266 | &::after 267 | top: $mf-font-size * 0.3 268 | left: 0 269 | transform: rotate(-45deg) 270 | 271 | label:hover .helper 272 | color: $mf-focus-color 273 | 274 | input:checked 275 | ~ .helper 276 | color: $mf-focus-color 277 | 278 | &::after, 279 | &::before 280 | opacity: 1 281 | transition: height $mf-transition-speed ease 282 | 283 | &::after 284 | height: $mf-font-size / 2 285 | 286 | &::before 287 | height: $mf-font-size * 1.2 288 | transition-delay: $mf-transition-speed 289 | 290 | .radio-control + .radio-control, 291 | .checkbox-control + .checkbox-control 292 | margin-top: $mf-font-size 293 | 294 | .has-error 295 | .legend.legend, 296 | &.control .label.label 297 | // Prevent !importantRule 298 | color: $mf-error-color 299 | 300 | &.control, 301 | &.checkbox-control, 302 | &.radio-control, 303 | &.radio-control 304 | .form-help, 305 | .helper 306 | color: $mf-error-color 307 | 308 | .bar 309 | &::before 310 | background: $mf-error-color 311 | left: 0 312 | width: 100% --------------------------------------------------------------------------------