Commit 4a4cb4b9 authored by Ivica Puljic's avatar Ivica Puljic Committed by Ivica Puljic
Browse files

Issue #3308548 by pivica: Move form inline rules to partial so child theme can opt-out this rules

parent 1cdbfdc4

themes/bs_bootstrap/sass/components/forms.scss

+1 −0
Original line number Diff line number Diff line
@@ -4,4 +4,5 @@ 
@import "bootstrap/scss/input-group";

@import "bs_base/sass/components/partials/forms";

@import "partials/forms";

@import "partials/forms-inline";

@import "partials/webform";

themes/bs_bootstrap/sass/components/partials/_forms-inline.scss

0 → 100644
+88 −0
Original line number Diff line number Diff line 
// Alternative to Bootstrap form-inline. This one will not inline labels.

// Useful for exposed views forms.

.form-inline-group {

  > details.form-group {

    summary {

      &:focus {

        outline: 0;

        box-shadow: $custom-select-focus-box-shadow;

      }

    }

  }



  .form-submit {

    width: 100%;

  }



  @include media-breakpoint-up('sm') {

    display: flex;

    flex-wrap: wrap;

    // Make sure that all items are bottom aligned.

    align-items: flex-end;



    margin-right: -$form-inline-group-gutter/2;

    margin-left: -$form-inline-group-gutter/2;



    > .form-group {

      padding-right: $form-inline-group-gutter/2;

      padding-left: $form-inline-group-gutter/2;

      // Don't allow input fields with big size attribute to take too much

      // space.

      max-width: 25%;



      &.form-type-datetime {

        // Reset max-width because datetime needs more space.

        max-width: none;



        .form-group {

          // Reset max-width for subgroup also.

          max-width: none;

          // Not enough space for datetime so lets remove padding.

          padding-right: 0;

          padding-left: 0;

        }

      }

    }



    // @TODO - not sure why are we even supporting case where details can be

    // inlined - do we have this kind of a case in views exposed filters or

    // somewhere else? Consider to remove this in future.

    > details.form-group {

      flex: 1 0 100%;

      // We need to dynamically lower width for one $spacer unit because details

      // have border on it.

      max-width: calc(100% - #{$form-inline-group-gutter});

      margin-right: $form-inline-group-gutter/2;

      margin-left: $form-inline-group-gutter/2;



      summary {

        margin-right: -$form-inline-group-gutter/2;

        margin-left: -$form-inline-group-gutter/2;

      }

    }

    .details-wrapper {

      display: flex;

      flex-wrap: wrap;

      // Full negative gutter because we have also left/right padding of inner

      // form-groups.

      margin-right: -$form-inline-group-gutter;

      margin-left: -$form-inline-group-gutter;

      // Reset bottom margin that is coming from inner form-groups.

      margin-bottom: -$form-group-margin-bottom;



      .form-group {

        @include media-responsive-breakpoint-up() {

          flex: 0 0 percentage(1/2);

          max-width: percentage(1/2);

        }

      }

    }



    > .form-actions {

      margin-top: 0;

      margin-bottom: $form-group-margin-bottom;

      padding-right: $form-inline-group-gutter/2;

      padding-left: $form-inline-group-gutter/2;

    }

  }

}

themes/bs_bootstrap/sass/components/partials/_forms.scss

+0 −89
Original line number Diff line number Diff line
@@ -477,92 +477,3 @@ details { 
    margin-bottom: 0.5 * $spacer;

  }

}
 


// Alternative to Bootstrap form-inline. This one will not inline labels.

// Useful for exposed views forms.

.form-inline-group {

  > details.form-group {

    summary {

      &:focus {

        outline: 0;

        box-shadow: $custom-select-focus-box-shadow;

      }

    }

  }



  .form-submit {

    width: 100%;

  }



  @include media-breakpoint-up('sm') {

    display: flex;

    flex-wrap: wrap;

    // Make sure that all items are bottom aligned.

    align-items: flex-end;



    margin-right: -$form-inline-group-gutter/2;

    margin-left: -$form-inline-group-gutter/2;



    > .form-group {

      padding-right: $form-inline-group-gutter/2;

      padding-left: $form-inline-group-gutter/2;

      // Don't allow input fields with big size attribute to take too much

      // space.

      max-width: 25%;



      &.form-type-datetime {

        // Reset max-width because datetime needs more space.

        max-width: none;



        .form-group {

          // Reset max-width for subgroup also.

          max-width: none;

          // Not enough space for datetime so lets remove padding.

          padding-right: 0;

          padding-left: 0;

        }

      }

    }



    // @TODO - not sure why are we even supporting case where details can be

    // inlined - do we have this kind of a case in views exposed filters or

    // somewhere else? Consider to remove this in future.

    > details.form-group {

      flex: 1 0 100%;

      // We need to dynamically lower width for one $spacer unit because details

      // have border on it.

      max-width: calc(100% - #{$form-inline-group-gutter});

      margin-right: $form-inline-group-gutter/2;

      margin-left: $form-inline-group-gutter/2;



      summary {

        margin-right: -$form-inline-group-gutter/2;

        margin-left: -$form-inline-group-gutter/2;

      }

    }

    .details-wrapper {

      display: flex;

      flex-wrap: wrap;

      // Full negative gutter because we have also left/right padding of inner

      // form-groups.

      margin-right: -$form-inline-group-gutter;

      margin-left: -$form-inline-group-gutter;

      // Reset bottom margin that is coming from inner form-groups.

      margin-bottom: -$form-group-margin-bottom;



      .form-group {

        @include media-responsive-breakpoint-up() {

          flex: 0 0 percentage(1/2);

          max-width: percentage(1/2);

        }

      }

    }



    > .form-actions {

      margin-top: 0;

      margin-bottom: $form-group-margin-bottom;

      padding-right: $form-inline-group-gutter/2;

      padding-left: $form-inline-group-gutter/2;

    }

  }

}