[FR] Best Toggle UI design

[cprodhomme]

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

I have recently change the style of your toggle with a design more modern in arctic_admin :

Describe the solution you'd like A clear and concise description of what you want to happen.

I ask if you want to reuse the style or not ? :)

I can made the pull request if you want some help

Additional context *Add any other context or screenshots about the feature request here.(

The style i use :

Just thinks to remove the between the // reset style

$toggle-width: 40px !default;
$toggle-height: 20px !default;
$toggle-offset: 3px !default;

$toggle-outer-default: #ddd !default;
$toggle-outer-active: $primary-color !default;
$toggle-inner-default: #fff !default;
$toggle-inner-active: #fff !default;

$toggle-transition: 200ms ease-out !default;

.toggle-bool-switches-container {

  text-align: left;

  .toggle-bool-switch {
    // reset style
    background-image: none;
    box-shadow: none;
    //

    cursor: pointer;

    position: relative;
    display: inline-flex;
    align-items: center;
    width: $toggle-width;
    height: $toggle-height;
    background-color: $toggle-outer-default;
    border-radius: 100vw;
    cursor: pointer;
    transition: $toggle-transition;

    &::before {
      // reset style
      height: auto;
      width: auto;
      background-image: none;
      //

      content: "";
      position: absolute;
      top: $toggle-offset;
      left: $toggle-offset;
      bottom: $toggle-offset;

      aspect-ratio: 1 / 1;

      background-color: $toggle-inner-default;
      border-radius: 50%;
      box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.05);
      transition: $toggle-transition;
    }

    &.on {
      // reset style
      background-image: none;
      //
      background: $primary-color;

      &::before {
        // reset style
        left: $toggle-offset;
        //

        background-color: $toggle-inner-active;
        transform: translateX(
          calc($toggle-width - $toggle-height)
        );
      }
    }
  }
}

[difernandez]

Thanks for your suggestion, we actually use arctic_admin in many of our projects, so thank you for your work in that gem too! I think the new design does indeed look better and more modern, and I think it wouldn't look too out of place in the default activeadmin theme too. At a glance the changes look good, if you could open a PR with them I'd be happy to review it and give them a closer look