diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss index 974f764088..c384775daf 100644 --- a/scss/_custom-forms.scss +++ b/scss/_custom-forms.scss @@ -12,11 +12,10 @@ .custom-control { position: relative; display: inline; - padding-left: 1.5rem; - color: #555; + padding-left: $custom-control-gutter; + .custom-control { - margin-left: 1rem; + margin-left: $custom-control-spacer-x; } } @@ -26,31 +25,31 @@ opacity: 0; &:checked ~ .custom-control-indicator { - color: #fff; - background-color: #0074d9; - @include box-shadow(none); + color: $custom-control-checked-indicator-color; + background-color: $custom-control-checked-indicator-bg; + @include box-shadow($custom-control-checked-indicator-box-shadow); } &:focus ~ .custom-control-indicator { // the mixin is not used here to make sure there is feedback - box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9; + box-shadow: $custom-control-focus-indicator-box-shadow; } &:active ~ .custom-control-indicator { - color: #fff; - background-color: #84c6ff; - @include box-shadow(none); + color: $custom-control-active-indicator-color; + background-color: $custom-control-active-indicator-bg; + @include box-shadow($custom-control-active-indicator-box-shadow); } &:disabled { ~ .custom-control-indicator { - cursor: not-allowed; - background-color: $custom-form-bg-color-disabled; + cursor: $custom-control-disabled-cursor; + background-color: $custom-control-disabled-indicator-bg; } ~ .custom-control-description { - color: $custom-form-description-color-disabled; - cursor: not-allowed; + color: $custom-control-disabled-description-color; + cursor: $custom-control-disabled-cursor; } } } @@ -64,18 +63,14 @@ top: .0625rem; left: 0; display: block; - width: 1rem; - height: 1rem; - font-size: 65%; - line-height: 1rem; - color: #eee; - text-align: center; + width: $custom-control-indicator-size; + height: $custom-control-indicator-size; user-select: none; - background-color: $custom-form-bg-color; + background-color: $custom-control-indicator-bg; background-repeat: no-repeat; background-position: center center; - background-size: 50% 50%; - @include box-shadow(inset 0 .25rem .25rem rgba(0,0,0,.1)); + background-size: $custom-control-indicator-bg-size; + @include box-shadow($custom-control-indicator-box-shadow); } // Checkboxes @@ -84,17 +79,17 @@ .custom-checkbox { .custom-control-indicator { - border-radius: .25rem; + @include border-radius($custom-checkbox-radius); } .custom-control-input:checked ~ .custom-control-indicator { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=); + background-image: url(#{$custom-checkbox-checked-icon}); } .custom-control-input:indeterminate ~ .custom-control-indicator { - background-color: #0074d9; - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K); - @include box-shadow(none); + background-color: $custom-checkbox-indeterminate-bg; + background-image: url(#{$custom-checkbox-indeterminate-icon}); + @include box-shadow($custom-checkbox-indeterminate-box-shadow); } } @@ -104,11 +99,11 @@ .custom-radio { .custom-control-indicator { - border-radius: 50%; + border-radius: $custom-radio-radius; } .custom-control-input:checked ~ .custom-control-indicator { - background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==); + background-image: url(#{$custom-radio-checked-icon}); } } @@ -124,7 +119,7 @@ &::after { display: block; - margin-bottom: .25rem; + margin-bottom: $custom-control-spacer-y; content: ""; } @@ -145,23 +140,23 @@ .custom-select { display: inline-block; max-width: 100%; - padding: .375rem 1.75rem .375rem .75rem; - padding-right: .75rem \9; - color: $input-color; + padding: $custom-select-padding-y ($custom-select-padding-x + $custom-select-indicator-padding) $custom-select-padding-y $custom-select-padding-x; + padding-right: $custom-select-padding-x \9; + color: $custom-select-color; vertical-align: middle; - background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC) no-repeat right .75rem center; + background: $custom-select-bg url(#{$custom-select-indicator}) no-repeat right $custom-select-padding-x center; background-image: none \9; - background-size: 8px 10px; - border: $input-btn-border-width solid $input-border-color; - @include border-radius($border-radius); + background-size: $custom-select-bg-size; + border: $custom-select-border-width solid $custom-select-border-color; + @include border-radius($custom-select-border-radius); // Use vendor prefixes as `appearance` isn't part of the CSS spec. -moz-appearance: none; -webkit-appearance: none; &:focus { - border-color: #51a7e8; + border-color: $custom-select-focus-border-color; outline: none; - @include box-shadow(inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5)); + @include box-shadow($custom-select-focus-box-shadow); } // Hides the default caret in IE11 @@ -171,14 +166,14 @@ } .custom-select-sm { - padding-top: 3px; - padding-bottom: 3px; - font-size: 12px; + padding-top: $custom-select-padding-y; + padding-bottom: $custom-select-padding-y; + font-size: $custom-select-sm-font-size; - &:not([multiple]) { - height: 26px; - min-height: 26px; - } + // &:not([multiple]) { + // height: 26px; + // min-height: 26px; + // } } diff --git a/scss/_variables.scss b/scss/_variables.scss index 62515deaac..284e4f7e52 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -324,10 +324,54 @@ $input-group-addon-border-color: $input-border-color !default; $cursor-disabled: not-allowed !default; -$custom-form-bg-color: #ddd !default; -$custom-form-bg-color-disabled: #eee !default; -$custom-form-description-color-disabled: #767676 !default; +$custom-control-gutter: 1.5rem !default; +$custom-control-spacer-x: 1rem !default; +$custom-control-spacer-y: .25rem !default; +$custom-control-indicator-size: 1rem !default; +$custom-control-indicator-bg: #ddd !default; +$custom-control-indicator-bg-size: 50% 50% !default; +$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba(0,0,0,.1) !default; + +$custom-control-disabled-cursor: $cursor-disabled !default; +$custom-control-disabled-indicator-bg: #eee !default; +$custom-control-disabled-description-color: #767676 !default; + +$custom-control-checked-indicator-color: #fff !default; +$custom-control-checked-indicator-bg: #0074d9 !default; +$custom-control-checked-indicator-box-shadow: none !default; + +$custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; + +$custom-control-active-indicator-color: #fff !default; +$custom-control-active-indicator-bg: #84c6ff !default; +$custom-control-active-indicator-box-shadow: none !default; + +$custom-checkbox-radius: $border-radius !default; +$custom-checkbox-checked-icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=" !default; +$custom-checkbox-indeterminate-bg: #0074d9 !default; +$custom-checkbox-indeterminate-icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iOHB4IiBoZWlnaHQ9IjhweCIgdmlld0JveD0iMCAwIDggOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgOCA4IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0wLDN2Mmg4VjNIMHoiLz4NCjwvc3ZnPg0K" !default; +$custom-checkbox-indeterminate-box-shadow: none !default; + +$custom-radio-radius: 50% !default; +$custom-radio-checked-icon: "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==" !default; + +$custom-select-padding-x: .75rem !default; +$custom-select-padding-y: .375rem !default; +$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator +$custom-select-color: $input-color !default; +$custom-select-bg: #fff !default; +$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions +$custom-select-indicator: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAUCAMAAACzvE1FAAAADFBMVEUzMzMzMzMzMzMzMzMKAG/3AAAAA3RSTlMAf4C/aSLHAAAAPElEQVR42q3NMQ4AIAgEQTn//2cLdRKppSGzBYwzVXvznNWs8C58CiussPJj8h6NwgorrKRdTvuV9v16Afn0AYFOB7aYAAAAAElFTkSuQmCC" !default; +$custom-select-border-width: $input-btn-border-width !default; +$custom-select-border-color: $input-border-color !default; +$custom-select-border-radius: $border-radius !default; + +$custom-select-focus-border-color: #51a7e8 !default; +$custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(81, 167, 232, 0.5) !default; + +$custom-select-sm-padding-y: .2rem !default; +$custom-select-sm-font-size: 75% !default; // Form validation icons $form-icon-success: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2MTIgNzkyIj48cGF0aCBmaWxsPSIjNWNiODVjIiBkPSJNMjMzLjggNjEwYy0xMy4zIDAtMjYtNi0zNC0xNi44TDkwLjUgNDQ4LjhDNzYuMyA0MzAgODAgNDAzLjMgOTguOCAzODljMTguOC0xNC4yIDQ1LjUtMTAuNCA1OS44IDguNGw3MiA5NUw0NTEuMyAyNDJjMTIuNS0yMCAzOC44LTI2LjIgNTguOC0xMy43IDIwIDEyLjQgMjYgMzguNyAxMy43IDU4LjhMMjcwIDU5MGMtNy40IDEyLTIwLjIgMTkuNC0zNC4zIDIwaC0yeiIvPjwvc3ZnPg==" !default;