Modal windows

index.html

<div class="container">
<h2 class="h3">Slip effects</h2>
<ul class="button-group">
  <li><a class="btn btn-small modal-trigger" data-modal-id="modal-1">slip-top</a></li>
  <li><a class="btn btn-small modal-trigger" data-modal-id="modal-2">slip-bottom</a></li>
</ul>
<br />
<h2 class="h3">Slide effects</h2>
<ul class="button-group">
  <li><a class="btn btn-small modal-trigger" data-modal-id="modal-3">slide-top</a></li>
  <li><a class="btn btn-small modal-trigger" data-modal-id="modal-4">slide-right</a></li>
  <li><a class="btn btn-small modal-trigger" data-modal-id="modal-5">slide-bottom</a></li>
  <li><a class="btn btn-small modal-trigger" data-modal-id="modal-6">slide-left</a></li>
</ul>
<br />
<h2 class="h3">Flip effects</h2>
<ul class="button-group">
  <li><a class="btn btn-small modal-trigger" data-modal-id="modal-7">flip-horizontal</a></li>
  <li><a class="btn btn-small modal-trigger" data-modal-id="modal-8">flip-vertical</a></li>
</ul>
<br />
<h2 class="h3">Scale effects</h2>
<ul class="button-group">
  <li><a class="btn btn-small modal-trigger" data-modal-id="modal-9">fadescale</a></li>
  <li><a class="btn btn-small modal-trigger" data-modal-id="modal-10">superscaled</a></li>
</ul>
</div>

<div id="modal-1" class="modal" data-modal-effect="slip-top">
  <div class="modal-content">
    <h2>Consectetur adipiscing elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
  </div>
</div>
<div id="modal-2" class="modal" data-modal-effect="slip-bottom">
  <div class="modal-content">
    <h2>Consectetur adipiscing elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
  </div>
</div>
<div id="modal-3" class="modal" data-modal-effect="slide-top">
  <div class="modal-content">
    <h2>Consectetur adipiscing elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
  </div>
</div>
<div id="modal-4" class="modal" data-modal-effect="slide-right">
  <div class="modal-content">
    <h2>Consectetur adipiscing elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
  </div>
</div>
<div id="modal-5" class="modal" data-modal-effect="slide-bottom">
  <div class="modal-content">
    <h2>Consectetur adipiscing elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
  </div>
</div>
<div id="modal-6" class="modal" data-modal-effect="slide-left">
  <div class="modal-content">
    <h2>Consectetur adipiscing elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
  </div>
</div>
<div id="modal-7" class="modal" data-modal-effect="flip-horizontal">
  <div class="modal-content">
    <h2>Consectetur adipiscing elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
  </div>
</div>
<div id="modal-8" class="modal" data-modal-effect="flip-vertical">
  <div class="modal-content">
    <h2>Consectetur adipiscing elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
  </div>
</div>
<div id="modal-9" class="modal" data-modal-effect="fadescale">
  <div class="modal-content">
    <h2>Consectetur adipiscing elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
  </div>
</div>
<div id="modal-10" class="modal" data-modal-effect="superscale">
  <div class="modal-content">
    <h2>Consectetur adipiscing elit</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis consectetur ligula. Morbi dapibus tellus a ipsum sollicitudin aliquet. Phasellus id est lacus. Pellentesque a elementum velit, a tempor nulla. Mauris mauris lectus, tincidunt et purus rhoncus, eleifend convallis turpis. Nunc ullamcorper bibendum diam, vitae tempus dolor hendrerit iaculis. Phasellus tellus elit, feugiat vel mi et, euismod varius augue. Nulla a porttitor sapien. Donec vestibulum ac nisl sed bibendum. Praesent neque ipsum, commodo eget venenatis vel, tempus sit amet ante. Curabitur vel odio eget urna dapibus imperdiet sit amet eget felis. Vestibulum eros velit, posuere a metus eget, aliquam euismod purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
    <a href="#" class="btn btn-primary btn-medium modal-close">Akkoord</a>
  </div>
</div>

Modal windows.markdown

Modal windows

Modals with nice effects written with SASS/Compass. I divided my effects in separated SASS partials so I can exclude effects when I don't use them to reduce bloat in the compiled CSS file. Effect credits go to Codrops.

A Pen by Jeroen van Beek on CodePen.

License.

script.js

var modules = {
  $window: $(window),
  $html: $('html'),
  $body: $('body'),
  $container: $('.container'),
  
  init: function () {
    $(function () {
       modules.modals.init();
    });
  }
  
  ,modals: {
    trigger: $('.modal-trigger'),
    modal: $('.modal'),
    scrollTopPosition: null,
  
    init: function () {
      var self = this;
  
      if (self.trigger.length > 0 && self.modal.length > 0) {
        modules.$body.append('<div class="modal-overlay"></div>');
  
        self.triggers();
      }
    },
  
    triggers: function () {
      var self = this;
    
      self.trigger.on('click', function (e) {
        e.preventDefault();
      
        var $trigger = $(this);
      
        self.openModal($trigger, $trigger.data('modalId'));
      });
    
      $('.modal-overlay').on('click', function (e) {
        e.preventDefault();
        self.closeModal();
      });
    
      modules.$body.on('keydown', function(e){
        if (e.keyCode === 27) {
          self.closeModal();
        }
      });
    
      $('.modal-close').on('click', function(e) {
        e.preventDefault();
        self.closeModal();
      });
    },
    
    openModal: function (_trigger, _modalId) {
      var self = this,
          scrollTopPosition = modules.$window.scrollTop(),
          $targetModal = $('#' + _modalId);
      
      self.scrollTopPosition = scrollTopPosition;
      
      modules.$html
      .addClass('modal-show')
      .attr('data-modal-effect', $targetModal.data('modal-effect'));
      
      $targetModal.addClass('modal-show');
      
      modules.$container.scrollTop(scrollTopPosition);
    },
      
    closeModal: function () {
      var self = this;
      
      $('.modal-show').removeClass('modal-show');
      modules.$html
        .removeClass('modal-show')
        .removeAttr('data-modal-effect');
        
      modules.$window.scrollTop(self.scrollTopPosition);
    }
  }
}

modules.init();

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

@import "compass/css3";

/*
  All credits for the modal effects go to Codrops:
  http://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects
*/

/*==========  Settings  ==========*/
$modal-overlay-bg-color      : #000000;
$modal-overlay-opacity       : 0.6;
$modal-content-bg-color      : #ffffff;
$modal-content-padding       : 40px; // 40px
$modal-content-border-radius : 3px;

@mixin animation($name, $duration, $direction, $function) {
    -webkit-animation: $name $duration $direction $function;
    -moz-animation: $name $duration $direction $function;
    animation: $name $duration $direction $function;
}

/*==========  REM  ==========*/

// Source: https://github.com/bitmanic/rem
// Baseline, measured in pixels
// The value should be the same as the font-size value for the html element
// If the html element's font-size is set to 62.5% (of the browser's default font-size of 16px),
// then the variable below would be 10px.
@mixin rem($property, $px-values) {
    // Convert the baseline into rems
    $baseline-rem: 16px / 1rem * 1;
    // Print the first line in pixel values
    #{$property}: $px-values;
    // If there is only one (numeric) value, return the property/value line for it.
    @if type-of($px-values) == "number" {
        #{$property}: $px-values / $baseline-rem;
    } @else {
        // Create an empty list that we can dump values into
        $rem-values: ();
        @each $value in $px-values {// If the value is zero or not a number, return it
            @if $value == 0 or type-of( $value ) != "number" {
                $rem-values: append($rem-values, $value);
            } @else {
                $rem-values: append($rem-values, $value / $baseline-rem);
            }
        }
        // Return the property and its list of converted values
        #{$property}: $rem-values;
    }
}

/*==============================
=            Modals            =
==============================*/

.modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;

    @include backface-visibility(hidden);
    @include translate(-50%, -50%);

    &.modal-show {
        visibility: visible;
    }

    .lt-ie9 & {
        top: 0;
        margin-left: -315px;
    }
}

.modal-content {
    background: $modal-content-bg-color;
    position: relative;
    margin: 0 auto;
    padding: $modal-content-padding;
    border-radius: $modal-content-border-radius;
}

.modal-overlay {
    background: $modal-overlay-bg-color;
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;

    @include opacity(0);
    @include transition-property(visibility, opacity);
    @include transition-delay(0.5s, 0.1s);
    @include transition-duration(0, 0.5s);

    .modal-show & {
        visibility: visible;

        @include opacity($modal-overlay-opacity);
        @include single-transition(opacity, 0.5s);
    }
}

/*==========================================
=            Slip (top, bottom)            =
==========================================*/

@-webkit-keyframes slipTop {
    50% {
        -webkit-transform: rotateX(10deg);
        -webkit-animation-timing-function: ease-out;
    }
}

@-moz-keyframes slipTop {
    50% {
        -moz-transform: rotateX(10deg);
        -moz-animation-timing-function: ease-out;
    }
}

@keyframes slipTop {
    50% {
        transform: rotateX(10deg);
        animation-timing-function: ease-out;
    }
}

@-webkit-keyframes slipBottom {
    50% {
        -webkit-transform: rotateX(-10deg);
        -webkit-animation-timing-function: ease-out;
    }
}

@-moz-keyframes slipBottom {
    50% {
        -moz-transform: rotateX(-10deg);
        -moz-animation-timing-function: ease-out;
    }
}

@keyframes slipBottom {
    50% {
        transform: rotateX(-10deg);
        animation-timing-function: ease-out;
    }
}

html[data-modal-effect|=slip],
[data-modal-effect|=slip] body,
[data-modal-effect|=slip] .container {
    height: 100%;
    overflow: hidden;
}

[data-modal-effect|=slip] body {
    @include perspective(600);
}

[data-modal-effect|=slip] {
    .container,
    .modal-overlay {
        @include transform-style(preserve-3d);
    }
}

[data-modal-effect=slip-top] {
    .container,
    .modal-overlay {
        @include transform-origin(50%, 100%);
        @include animation(slipTop, 0.5s, forwards, ease-in);
    }
}

[data-modal-effect=slip-bottom] {
    .container,
    .modal-overlay {
        @include transform-origin(50%, 0);
        @include animation(slipBottom, 0.5s, forwards, ease-in);
    }
}

.modal {
    &[data-modal-effect|=slip] {
        .modal-content {
            @include opacity(0);
            @include single-transition(all, 0.5s, 0.1s)
        }

        &.modal-show {
            .modal-content {
                @include opacity(1);
            }
        }
    }

    &[data-modal-effect=slip-top] {
        .modal-content {
            @include translateY(-300%);
        }

        &.modal-show {
            .modal-content {
                @include translateY(0);
            }
        }
    }

    &[data-modal-effect=slip-bottom] {
        .modal-content {
            @include translateY(300%);
        }

        &.modal-show {
            .modal-content {
                @include translateY(0);
            }
        }
    }
}

/*========================================================
=            Slide (top, right, bottom, left)            =
========================================================*/

.modal {
    &[data-modal-effect|=slide] {
        .modal-content {
            @include opacity(0);
            @include single-transition(all, 0.5s, 0);
        }

        &.modal-show {
            .modal-content {
                @include opacity(1);
                @include single-transition(all, 0.5s, 0.1s)
            }
        }
    }

    &[data-modal-effect=slide-top] {
        .modal-content {
            @include translateY(-300%);
        }

        &.modal-show {
            .modal-content {
                @include translateY(0);
            }
        }
    }

    &[data-modal-effect=slide-right] {
        .modal-content {
            @include translateX(300%);
        }

        &.modal-show {
            .modal-content {
                @include translateX(0);
            }
        }
    }

    &[data-modal-effect=slide-bottom] {
        .modal-content {
            @include translateY(300%);
        }

        &.modal-show {
            .modal-content {
                @include translateY(0);
            }
        }
    }

    &[data-modal-effect=slide-left] {
        .modal-content {
            @include translateX(-300%);
        }

        &.modal-show {
            .modal-content {
                @include translateX(0);
            }
        }
    }
}

/*===================================================
=            Flip (horizontal, vertical)            =
===================================================*/

.modal {
    &[data-modal-effect|=flip] {
        @include perspective(1300);

        .modal-content {
            @include opacity(0);
            @include transform-style(preserve-3d);
            @include single-transition(all, 0.3s);
        }

        &.modal-show {
            .modal-content {
                @include opacity(1);
            }
        }
    }

    &[data-modal-effect=flip-horizontal] {
        .modal-content {
            @include rotateY(-70deg);
        }

        &.modal-show {
            .modal-content {
                @include rotateY(0deg);
            }
        }
    }

    &[data-modal-effect=flip-vertical] {
        .modal-content {
            @include rotateX(-70deg);
        }

        &.modal-show {
            .modal-content {
                @include rotateX(0deg);
            }
        }
    }
}

/*=======================================
=            Fade in & scale            =
=======================================*/

.modal[data-modal-effect=fadescale] {
    .modal-content {
        @include opacity(0);
        @include scale(0.7);
        @include single-transition(all, 0.3s);
    }

    &.modal-show {
        .modal-content {
            @include opacity(1);
            @include scale(1);
        }
    }
}

/*=====================================
=             Super scale             =
=====================================*/

.modal[data-modal-effect=superscale] {
    .modal-content {
        @include opacity(0);
        @include scale(2);
        @include single-transition(all, 0.3s);
    }

    &.modal-show {
        .modal-content {
            @include opacity(1);
            @include scale(1);
        }
    }
}




/*==========  Buttons  ==========*/
$btn-gradient           : false;
$btn-border-radius      : 3px;
$btn-default-bg-color   : #e8e8e8;

.btn {
    display: inline-block;
    color: #333333;
    border-radius: 3px;
    background-color: $btn-default-bg-color;
    border: 0;
    outline: 0;
    cursor: pointer;
    text-align: center;
    border: 1px solid darken($btn-default-bg-color, 10%);
    font-size: 1em;
    text-decoration: none;
    @include single-transition(all, 0.2s);
    @include appearance(none);
    //@include user-select(none);
    user-select: none;

    @if $btn-gradient {
        @include background-image(linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)));
    }

    &:hover {
        color: #333333;
        background-color: darken($btn-default-bg-color, 5%);
    }

    &:focus {
        outline: none;
        box-shadow: 0 0 10px rgba(darken($btn-default-bg-color, 15%), 1);
        @include transition-duration(0.05s);
    }

    &:disabled {
        background-color: $btn-default-bg-color;
        cursor: not-allowed;
        color: darken(#ffffff, 20%);
        @include opacity(0.5);

        &:focus {
            box-shadow: none;
        }
    }
}

.btn-small {
    @include rem(padding, 8px 30px);
}

.btn-medium {
    @include rem(padding, 12px 35px);
}

.btn-divider {
    cursor: default;
}

.button-group {
//    @extend .list-inline;
    //@extend .clearfix;
    @include rem(margin, 0 0 40px 0);
    padding: 0;

    > li {
        list-style-type: none;
        margin: 0 0 0 -1px;
        float: left;

        .btn {
            border-radius: 0;
        }

        &:first-child {
            margin: 0;

            .btn {
                border-radius: $btn-border-radius 0 0 $btn-border-radius;
            }
        }

        &:last-child {
            .btn {
                border-radius: 0 $btn-border-radius $btn-border-radius 0;
            }
        }
    }
}

body {
  @include rem(padding, 50px);
}