diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 85e97fda5c6..4fe5be63434 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -61,7 +61,7 @@ $grid-breakpoints: ( // // Define the maximum width of `.container` for different screen sizes. -$container-max-widths: ( +$container-max-widths: (tork sm: 576px, md: 720px, lg: 940px, @@ -170,9 +170,13 @@ $input-padding-y: .6rem !default; $input-line-height: 1.35rem !default; $input-btn-border-width: 1px; -$input-border-radius: $border-radius !default; -$input-border-radius-lg: $border-radius-lg !default; -$input-border-radius-sm: $border-radius-sm !default; +$input-border-radius: 0 $border-radius $border-radius 0 !default; +$input-border-radius-lg: 0 $border-radius-lg $border-radius-lg 0 !default; +$input-border-radius-sm: 0 $border-radius-sm $border-radius-sm 0 !default; + +$label-border-radius: $border-radius 0 0 $border-radius !default; +$label-border-radius-lg: $border-radius-lg 0 0 $border-radius-lg !default; +$label-border-radius-sm: $border-radius-sm 0 0 $border-radius-sm !default; $input-padding-x-sm: .5rem !default; $input-padding-y-sm: .25rem !default; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index d3ab196dd30..e300f4aa304 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -1,4 +1,5 @@ -$gf-form-margin: 0.4rem; +$gf-form-margin: 0.2rem; +$gf-form-label-margin: 0.2rem; .gf-form { margin-bottom: $gf-form-margin; @@ -49,8 +50,9 @@ $gf-form-margin: 0.4rem; background-color: $input-label-bg; display: block; font-size: $font-size-sm; - margin-right: $gf-form-margin; + margin-right: $gf-form-label-margin; border: $input-btn-border-width solid transparent; + @include border-radius($label-border-radius-sm); } .gf-form-checkbox { @@ -79,8 +81,8 @@ $gf-form-margin: 0.4rem; background-color: $input-bg; background-image: none; background-clip: padding-box; - border: $input-btn-border-width solid $input-border-color; - @include border-radius($input-border-radius); + border: $input-btn-border-width solid transparent; + @include border-radius($input-border-radius-sm); @include box-shadow($input-box-shadow); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;