From 18e08e777b5dcdb445952a579c02a77f86f7e56b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 24 Dec 2014 04:13:23 -0800 Subject: [PATCH] add custom forms, stub out examples for radios and checkboxes --- dist/css/bootstrap.css | 377 +++++++++++++++++++++++++++++ dist/css/bootstrap.css.map | 2 +- dist/css/bootstrap.min.css | 2 +- docs/_data/nav.yml | 1 + docs/_includes/footer.html | 9 + docs/assets/css/docs.min.css | 2 +- docs/assets/css/docs.min.css.map | 2 +- docs/assets/js/src/application.js | 7 - docs/components/custom-forms.md | 25 ++ docs/dist/css/bootstrap.css | 390 +++++++++++++++++++++++++++++- docs/dist/css/bootstrap.css.map | 2 +- docs/dist/css/bootstrap.min.css | 2 +- scss/_custom-forms.scss | 291 ++++++++++++++++++++++ scss/bootstrap.scss | 1 + 14 files changed, 1091 insertions(+), 22 deletions(-) create mode 100644 docs/components/custom-forms.md create mode 100644 scss/_custom-forms.scss diff --git a/dist/css/bootstrap.css b/dist/css/bootstrap.css index 4890b50a79..d3204d1c53 100644 --- a/dist/css/bootstrap.css +++ b/dist/css/bootstrap.css @@ -3015,6 +3015,383 @@ input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="butto margin-left: -1px; } +.c-input { + position: relative; + display: inline-block; + padding-left: 1.5rem; + font-weight: normal; + color: #555; + cursor: pointer; +} +.c-input > input { + position: absolute; + z-index: -1; + opacity: 0; + /* Put the input behind the label so it doesn't overlay text */ +} + +.c-indicator { + position: absolute; + top: .25rem; + left: 0; + display: block; + width: 1rem; + height: 1rem; + font-size: 65%; + line-height: 1rem; + color: #eee; + text-align: center; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background-color: #eee; + background-repeat: no-repeat; + background-position: center center; + -webkit-background-size: 50% 50%; + background-size: 50% 50%; +} + +/* Hover state */ +/* Uncomment if you need it, but be aware of the sticky iOS states. +.control:hover .control-indicator { + color: #fff; + background-color: #ccc; +} +*/ +/* Focus */ +.c-input input:focus ~ .c-indicator { + -webkit-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; + box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; +} + +/* Checked state */ +.c-input input:checked ~ .c-indicator { + color: #fff; + background-color: #0074d9; +} + +/* Active */ +.c-input input:active ~ .c-indicator { + color: #fff; + background-color: #84c6ff; +} + +/* Checkbox modifiers */ +.c-checkbox .c-indicator { + border-radius: .25rem; +} + +.c-checkbox input:checked ~ .c-indicator { + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); +} + +/* Radio modifiers */ +.c-radio .c-indicator { + border-radius: 50%; +} + +.c-radio input:checked ~ .c-indicator { + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==); +} + +/* Alternately, use another character */ +.control-x input:checked ~ .control-indicator { + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xLjQsMEwwLDEuNGwwLjcsMC43bDEuOCwxLjhMMC43LDUuN0wwLDYuNGwxLjQsMS40bDAuNy0wLjdsMS44LTEuOGwxLjgsMS44bDAuNywwLjdsMS40LTEuNEw3LjEsNS43DQoJTDUuMywzLjlsMS44LTEuOGwwLjctMC43TDYuNCwwTDUuNywwLjdMMy45LDIuNUwyLjEsMC43QzIuMSwwLjcsMS40LDAsMS40LDB6Ii8+DQo8L3N2Zz4NCg==); +} + +.control-dash input:checked ~ .control-indicator { + background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K); +} + +/* +* Select +*/ +.select { + position: relative; + display: inline-block; + color: #555; +} + +.select select { + display: inline-block; + width: 100%; + -webkit-appearance: none; + padding: .5rem 2.25rem .5rem 1rem; + margin: 0; + line-height: 1.5; + color: #555; + cursor: pointer; + background-color: #eee; + border: 0; + border-radius: .25rem; + outline: 0; + + -moz-appearance: none; + appearance: none; +} + +/* Undo the Firefox inner focus ring */ +.select select:focus:-moz-focusring { + color: transparent; + text-shadow: 0 0 0 #000; +} + +/* Dropdown arrow */ +.select:after { + position: absolute; + top: 50%; + right: 1.25rem; + display: inline-block; + width: 0; + height: 0; + margin-top: -.15rem; + pointer-events: none; + content: ""; + border-top: .35rem solid; + border-right: .35rem solid transparent; + border-bottom: .35rem solid transparent; + border-left: .35rem solid transparent; +} + +/* Hover state */ +/* Uncomment if you need it, but be aware of the sticky iOS states. +.select select:hover { + background-color: #ddd; +} +*/ +/* Focus */ +.select select:focus { + -webkit-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; + box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; +} + +/* Active/open */ +.select select:active { + color: #fff; + background-color: #0074d9; +} + +/* Hide the arrow in IE10 and up */ +.select select::-ms-expand { + display: none; +} + +/* Media query to target Firefox only */ +@-moz-document url-prefix() { + /* Firefox hack to hide the arrow */ + /*