Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(b-form-datepicker/b-form-timepicker): control size (#6249)
  • Loading branch information
jacobmllr95 committed Dec 23, 2020
1 parent 6789dd7 commit f2ffbeb
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 14 deletions.
23 changes: 15 additions & 8 deletions src/components/form-btn-label-control/_form-btn-label-control.scss
Expand Up @@ -8,13 +8,16 @@ $bv-form-btn-label-control-defined: false !default;
// Currently used by BFormTimepicker and BFormDatepicker
// Does not apply to button-only styling
.b-form-btn-label-control.form-control {
display: flex;
align-items: stretch;
height: auto;
padding: 0;
// Remove background validation images and padding from
// main wrapper as they will be present in the inner label element
background-image: none;
padding: 0;

@at-root {
// Handle input-group padding overrides
// Handle `.input-group` padding overrides
.input-group & {
padding: 0;
}
Expand Down Expand Up @@ -55,19 +58,23 @@ $bv-form-btn-label-control-defined: false !default;
padding: 0.5rem;
}

> label {
outline: 0;
> .form-control {
height: auto;
// Set a minimum height, as we have height set to `auto`
// (to allow the content to wrap, if needed)
// We subtract off the border, as we have border set to `0`
min-height: calc(#{$input-height} - #{$input-height-border});
padding-left: 0.25rem;
margin: 0;
border: 0;
outline: 0;
background: transparent;
word-break: break-word;
font-size: inherit;
white-space: normal;
@if $enable-pointer-cursor-for-buttons {
cursor: pointer;
}
// Set a minimum height, as we have height set to auto
// (to allow the content to wrap if needed)
// We subtract off the border, as we have border set to 0
min-height: calc(#{$input-height} - #{$input-height-border});

&.form-control-sm {
min-height: calc(#{$input-height-sm} - #{$input-height-border});
Expand Down
Expand Up @@ -212,9 +212,6 @@ export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({
? 'sr-only' // Hidden in button only mode
: [
'form-control',
'text-break',
'text-wrap',
'bg-transparent',
// Mute the text if showing the placeholder
{ 'text-muted': !value },
this.stateClass,
Expand Down Expand Up @@ -255,9 +252,6 @@ export const BVFormBtnLabelControl = /*#__PURE__*/ Vue.extend({
{
'btn-group': buttonOnly,
'form-control': !buttonOnly,
'd-flex': !buttonOnly,
'h-auto': !buttonOnly,
'align-items-stretch': !buttonOnly,
focus: hasFocus && !buttonOnly,
show: visible,
'is-valid': state === true,
Expand Down

0 comments on commit f2ffbeb

Please sign in to comment.