diff options
author | Thomas Park <thomas@thomaspark.me> | 2015-01-29 01:21:00 -0500 |
---|---|---|
committer | Thomas Park <thomas@thomaspark.me> | 2015-01-29 01:21:00 -0500 |
commit | 6edebb1e891689b5e5e8b882fb7a1943794b2837 (patch) | |
tree | 662e1b6511a461624d42c69b9c2058b9c2c45757 /paper/bootswatch.less | |
parent | d7fa3be4c099518668fca22769447dfe58607eba (diff) |
paper: custom checkbox and radio buttons, closes #393
Diffstat (limited to 'paper/bootswatch.less')
-rw-r--r-- | paper/bootswatch.less | 117 |
1 files changed, 117 insertions, 0 deletions
diff --git a/paper/bootswatch.less b/paper/bootswatch.less index ae95b12b..2770a38b 100644 --- a/paper/bootswatch.less +++ b/paper/bootswatch.less @@ -194,6 +194,123 @@ select.form-control { } } +.radio, +.radio-inline, +.checkbox, +.checkbox-inline { + label { + padding-left: 25px; + } +} + +input[type="radio"], +.radio input[type="radio"], +.radio-inline input[type="radio"] { + margin-top: 5px; + margin-left: -25px; + border: none; + background-color: transparent; + -webkit-appearance: none; + appearance: none; + + &:focus { + outline: none; + } + + &:before, + &:after { + content: ""; + display: block; + width: 18px; + height: 18px; + margin-top: -3px; + border-radius: 50%; + .transition(240ms); + } + + &:before { + position: absolute; + left: 0; + top: 0; + background-color: @brand-primary; + .scale(0); + } + + &:after { + border: 2px solid @gray; + } + + &:checked:before { + .scale(0.5); + } + + &:disabled:checked:before { + background-color: @gray-light; + } + + &:checked:after { + border-color: @brand-primary; + } + + &:disabled:after, + &:disabled:checked:after { + border-color: @gray-light; + } +} + +input[type="checkbox"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { + margin-left: -25px; + border: none; + -webkit-appearance: none; + appearance: none; + + &:focus { + outline: none; + } + + &:after { + content: ""; + display: block; + width: 18px; + height: 18px; + margin-top: -2px; + margin-right: 5px; + border: 2px solid @gray; + border-radius: 2px; + .transition(240ms); + } + + &:checked:before { + content: ""; + position: absolute; + top: 0; + left: 6px; + display: table; + width: 6px; + height: 12px; + border: 2px solid #fff; + border-top-width: 0; + border-left-width: 0; + .rotate(45deg); + } + + &:checked:after { + background-color: @brand-primary; + border-color: @brand-primary; + } + + &:disabled:after { + border-color: @gray-light; + } + + &:disabled:checked:after { + background-color: @gray-light; + border-color: transparent; + } +} + .has-warning { input, .form-control, |