kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code Releases Activity

some cleanup

Browse source
This commit is contained in:
Mark Otto 2014-12-24 04:47:08 -08:00
parent 18e08e777b
commit e500a9a354
1 changed files with 42 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
scss/_custom-forms.scss
View file

@ -3,6 +3,9 @@
// http://useiconic.com/open
// Checkboxes and radios
//
// Base class takes care of all the key behavioral aspects.
.c-input {
position: relative;
display: inline-block;
@ -15,8 +18,26 @@
position: absolute;
opacity: 0;
z-index: -1; /* Put the input behind the label so it doesn't overlay text */
&:focus ~ .c-indicator {
box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9;
}
&:checked ~ .c-indicator {
color: #fff;
background-color: #0074d9;
}
&:active ~ .c-indicator {
color: #fff;
background-color: #84c6ff;
}
}
}
// Custom indicator
//
// Generates a shadow element to create our makeshift checkbox/radio background.
.c-indicator {
position: absolute;
@ -36,46 +57,33 @@
user-select: none;
}
/* Hover state */
/* Uncomment if you need it, but be aware of the sticky iOS states.
.control:hover .control-indicator {
color: #fff;
background-color: #ccc;
}
*/
// Checkboxes
//
// Tweak just a few things for checkboxes.
/* Focus */
.c-input input:focus ~ .c-indicator {
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 {
.c-checkbox {
.c-indicator {
border-radius: .25rem;
}
.c-checkbox input:checked ~ .c-indicator {
input:checked ~ .c-indicator {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);
}
}
/* Radio modifiers */
.c-radio .c-indicator {
// Radios
//
// Tweak just a few things for radios.
.c-radio {
.c-indicator {
border-radius: 50%;
}
.c-radio input:checked ~ .c-indicator {
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 {