mtl 1.1.0 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/assets/javascripts/mtl/dropdown.coffee +1 -1
- data/app/assets/stylesheets/mtl/extend/_chips.scss +20 -0
- data/app/assets/stylesheets/mtl/extend/_side-nav.scss +4 -2
- data/lib/generators/mtl/templates/_variables.scss +5 -0
- data/lib/mtl/version.rb +2 -2
- data/mtl.gemspec +11 -0
- data/package.json +1 -1
- data/vendor/assets/javascripts/materialize/animation.js +8 -9
- data/vendor/assets/javascripts/materialize/carousel.js +51 -24
- data/vendor/assets/javascripts/materialize/character_counter.js +2 -2
- data/vendor/assets/javascripts/materialize/chips.js +40 -11
- data/vendor/assets/javascripts/materialize/dropdown.js +12 -12
- data/vendor/assets/javascripts/materialize/forms.js +131 -35
- data/vendor/assets/javascripts/materialize/global.js +55 -0
- data/vendor/assets/javascripts/materialize/init.js +40 -3
- data/vendor/assets/javascripts/materialize/materialbox.js +93 -77
- data/vendor/assets/javascripts/materialize/modal.js +12 -12
- data/vendor/assets/javascripts/materialize/parallax.js +48 -48
- data/vendor/assets/javascripts/materialize/scrollFire.js +40 -37
- data/vendor/assets/javascripts/materialize/scrollspy.js +2 -53
- data/vendor/assets/javascripts/materialize/sideNav.js +46 -40
- data/vendor/assets/javascripts/materialize/slider.js +15 -12
- data/vendor/assets/javascripts/materialize/tabs.js +104 -35
- data/vendor/assets/javascripts/materialize/toasts.js +122 -123
- data/vendor/assets/javascripts/materialize/tooltip.js +15 -13
- data/vendor/assets/javascripts/materialize/transitions.js +24 -24
- data/vendor/assets/stylesheets/materialize/_badges.scss +46 -0
- data/vendor/assets/stylesheets/materialize/_buttons.scss +29 -17
- data/vendor/assets/stylesheets/materialize/_cards.scss +9 -3
- data/vendor/assets/stylesheets/materialize/_carousel.scss +1 -1
- data/vendor/assets/stylesheets/materialize/_collapsible.scss +3 -7
- data/vendor/assets/stylesheets/materialize/_global.scss +5 -61
- data/vendor/assets/stylesheets/materialize/_materialbox.scss +13 -12
- data/vendor/assets/stylesheets/materialize/_navbar.scss +26 -7
- data/vendor/assets/stylesheets/materialize/_sideNav.scss +5 -5
- data/vendor/assets/stylesheets/materialize/_table_of_contents.scss +2 -2
- data/vendor/assets/stylesheets/materialize/_toast.scss +1 -1
- data/vendor/assets/stylesheets/materialize/_tooltip.scss +2 -3
- data/vendor/assets/stylesheets/materialize/_transitions.scss +13 -0
- data/vendor/assets/stylesheets/materialize/_variables.scss +7 -1
- data/vendor/assets/stylesheets/materialize/_waves.scss +80 -143
- data/vendor/assets/stylesheets/materialize/forms/_input-fields.scss +4 -4
- metadata +9 -4
| @@ -79,6 +79,35 @@ | |
| 79 79 |  | 
| 80 80 | 
             
            // Floating button
         | 
| 81 81 | 
             
            .btn-floating {
         | 
| 82 | 
            +
              &:hover {
         | 
| 83 | 
            +
                background-color: $button-floating-background-hover;
         | 
| 84 | 
            +
                @extend .z-depth-1-half;
         | 
| 85 | 
            +
              }
         | 
| 86 | 
            +
             | 
| 87 | 
            +
              &:before {
         | 
| 88 | 
            +
                border-radius: 0;
         | 
| 89 | 
            +
              }
         | 
| 90 | 
            +
             | 
| 91 | 
            +
              &.btn-large {
         | 
| 92 | 
            +
                width: $button-floating-large-size;
         | 
| 93 | 
            +
                height: $button-floating-large-size;
         | 
| 94 | 
            +
                i {
         | 
| 95 | 
            +
                  line-height: $button-floating-large-size;
         | 
| 96 | 
            +
                }
         | 
| 97 | 
            +
              }
         | 
| 98 | 
            +
             | 
| 99 | 
            +
              &.halfway-fab {
         | 
| 100 | 
            +
                &.left {
         | 
| 101 | 
            +
                  right: auto;
         | 
| 102 | 
            +
                  left: 24px;
         | 
| 103 | 
            +
                }
         | 
| 104 | 
            +
             | 
| 105 | 
            +
                position: absolute;
         | 
| 106 | 
            +
                right: 24px;
         | 
| 107 | 
            +
                bottom: 0;
         | 
| 108 | 
            +
                transform: translateY(50%);
         | 
| 109 | 
            +
              }
         | 
| 110 | 
            +
             | 
| 82 111 | 
             
              display: inline-block;
         | 
| 83 112 | 
             
              color: $button-floating-color;
         | 
| 84 113 | 
             
              position: relative;
         | 
| @@ -103,23 +132,6 @@ | |
| 103 132 | 
             
                font-size: $button-large-icon-font-size;
         | 
| 104 133 | 
             
                line-height: $button-floating-size;
         | 
| 105 134 | 
             
              }
         | 
| 106 | 
            -
             | 
| 107 | 
            -
              &:hover {
         | 
| 108 | 
            -
                background-color: $button-floating-background-hover;
         | 
| 109 | 
            -
                @extend .z-depth-1-half;
         | 
| 110 | 
            -
              }
         | 
| 111 | 
            -
             | 
| 112 | 
            -
              &:before {
         | 
| 113 | 
            -
                border-radius: 0;
         | 
| 114 | 
            -
              }
         | 
| 115 | 
            -
             | 
| 116 | 
            -
              &.btn-large {
         | 
| 117 | 
            -
                width: $button-floating-large-size;
         | 
| 118 | 
            -
                height: $button-floating-large-size;
         | 
| 119 | 
            -
                i {
         | 
| 120 | 
            -
                  line-height: $button-floating-large-size;
         | 
| 121 | 
            -
                }
         | 
| 122 | 
            -
              }
         | 
| 123 135 | 
             
            }
         | 
| 124 136 |  | 
| 125 137 | 
             
            // button fix
         | 
| @@ -133,9 +133,9 @@ | |
| 133 133 | 
             
                  position: absolute;
         | 
| 134 134 | 
             
                  bottom: 0;
         | 
| 135 135 | 
             
                  left: 0;
         | 
| 136 | 
            +
                  max-width: 100%;
         | 
| 136 137 | 
             
                  padding: $card-padding;
         | 
| 137 138 | 
             
                }
         | 
| 138 | 
            -
             | 
| 139 139 | 
             
              }
         | 
| 140 140 |  | 
| 141 141 | 
             
              .card-content {
         | 
| @@ -147,7 +147,13 @@ | |
| 147 147 | 
             
                  color: inherit;
         | 
| 148 148 | 
             
                }
         | 
| 149 149 | 
             
                .card-title {
         | 
| 150 | 
            -
                   | 
| 150 | 
            +
                  display: block;
         | 
| 151 | 
            +
                  line-height: 32px;
         | 
| 152 | 
            +
                  margin-bottom: 8px;
         | 
| 153 | 
            +
             | 
| 154 | 
            +
                  i {
         | 
| 155 | 
            +
                    line-height: 32px;
         | 
| 156 | 
            +
                  }
         | 
| 151 157 | 
             
                }
         | 
| 152 158 | 
             
              }
         | 
| 153 159 |  | 
| @@ -155,7 +161,7 @@ | |
| 155 161 | 
             
                position: relative;
         | 
| 156 162 | 
             
                background-color: inherit;
         | 
| 157 163 | 
             
                border-top: 1px solid rgba(160,160,160,.2);
         | 
| 158 | 
            -
                padding: $card-padding;
         | 
| 164 | 
            +
                padding: 16px $card-padding;
         | 
| 159 165 |  | 
| 160 166 | 
             
                a:not(.btn):not(.btn-large):not(.btn-floating) {
         | 
| 161 167 | 
             
                  color: $card-link-color;
         | 
| @@ -10,7 +10,7 @@ | |
| 10 10 | 
             
              display: block;
         | 
| 11 11 | 
             
              cursor: pointer;
         | 
| 12 12 | 
             
              min-height: $collapsible-height;
         | 
| 13 | 
            -
              line-height: $collapsible-height;
         | 
| 13 | 
            +
              line-height: $collapsible-line-height;
         | 
| 14 14 | 
             
              padding: 0 1rem;
         | 
| 15 15 | 
             
              background-color: $collapsible-header-color;
         | 
| 16 16 | 
             
              border-bottom: 1px solid $collapsible-border-color;
         | 
| @@ -18,7 +18,7 @@ | |
| 18 18 | 
             
              i {
         | 
| 19 19 | 
             
                width: 2rem;
         | 
| 20 20 | 
             
                font-size: 1.6rem;
         | 
| 21 | 
            -
                line-height: $collapsible-height;
         | 
| 21 | 
            +
                line-height: $collapsible-line-height;
         | 
| 22 22 | 
             
                display: block;
         | 
| 23 23 | 
             
                float: left;
         | 
| 24 24 | 
             
                text-align: center;
         | 
| @@ -30,11 +30,7 @@ | |
| 30 30 | 
             
              display: none;
         | 
| 31 31 | 
             
              border-bottom: 1px solid $collapsible-border-color;
         | 
| 32 32 | 
             
              box-sizing: border-box;
         | 
| 33 | 
            -
             | 
| 34 | 
            -
              p {
         | 
| 35 | 
            -
                margin: 0;
         | 
| 36 | 
            -
                padding: 2rem;
         | 
| 37 | 
            -
              }
         | 
| 33 | 
            +
              padding: 2rem;
         | 
| 38 34 | 
             
            }
         | 
| 39 35 |  | 
| 40 36 | 
             
            // sideNav collapsible styling
         | 
| @@ -345,14 +345,15 @@ ul.staggered-list li { | |
| 345 345 |  | 
| 346 346 | 
             
            // Footer
         | 
| 347 347 | 
             
            footer.page-footer {
         | 
| 348 | 
            -
              margin-top: 20px;
         | 
| 349 348 | 
             
              padding-top: 20px;
         | 
| 350 349 | 
             
              background-color: $footer-bg-color;
         | 
| 351 350 |  | 
| 352 351 | 
             
              .footer-copyright {
         | 
| 353 352 | 
             
                overflow: hidden;
         | 
| 354 | 
            -
                height: 50px;
         | 
| 355 | 
            -
                 | 
| 353 | 
            +
                min-height: 50px;
         | 
| 354 | 
            +
                display: flex;
         | 
| 355 | 
            +
                align-items: center;
         | 
| 356 | 
            +
                padding: 10px 0px;
         | 
| 356 357 | 
             
                color: rgba(255,255,255,.8);
         | 
| 357 358 | 
             
                background-color: rgba(51,51,51,.08);
         | 
| 358 359 | 
             
                @extend .light;
         | 
| @@ -495,7 +496,7 @@ td, th{ | |
| 495 496 |  | 
| 496 497 | 
             
              .collection-item {
         | 
| 497 498 | 
             
                background-color: $collection-bg-color;
         | 
| 498 | 
            -
                line-height:  | 
| 499 | 
            +
                line-height: $collection-line-height;
         | 
| 499 500 | 
             
                padding: 10px 20px;
         | 
| 500 501 | 
             
                margin: 0;
         | 
| 501 502 | 
             
                border-bottom: 1px solid $collection-border-color;
         | 
| @@ -592,63 +593,6 @@ td, th{ | |
| 592 593 |  | 
| 593 594 |  | 
| 594 595 |  | 
| 595 | 
            -
            // Badges
         | 
| 596 | 
            -
            span.badge {
         | 
| 597 | 
            -
              min-width: 3rem;
         | 
| 598 | 
            -
              padding: 0 6px;
         | 
| 599 | 
            -
              margin-left: 14px;
         | 
| 600 | 
            -
              text-align: center;
         | 
| 601 | 
            -
              font-size: 1rem;
         | 
| 602 | 
            -
              line-height: inherit;
         | 
| 603 | 
            -
              color: color('grey', 'darken-1');
         | 
| 604 | 
            -
              float: right;
         | 
| 605 | 
            -
              box-sizing: border-box;
         | 
| 606 | 
            -
             | 
| 607 | 
            -
              &.new {
         | 
| 608 | 
            -
                font-weight: 300;
         | 
| 609 | 
            -
                font-size: 0.8rem;
         | 
| 610 | 
            -
                color: #fff;
         | 
| 611 | 
            -
                background-color: $badge-bg-color;
         | 
| 612 | 
            -
                border-radius: 2px;
         | 
| 613 | 
            -
              }
         | 
| 614 | 
            -
              &.new:after {
         | 
| 615 | 
            -
                content: " new";
         | 
| 616 | 
            -
              }
         | 
| 617 | 
            -
             | 
| 618 | 
            -
              &[data-badge-caption]::after {
         | 
| 619 | 
            -
                content: " " attr(data-badge-caption);
         | 
| 620 | 
            -
              }
         | 
| 621 | 
            -
            }
         | 
| 622 | 
            -
            nav ul a span.badge {
         | 
| 623 | 
            -
              display: inline-block;
         | 
| 624 | 
            -
              float: none;
         | 
| 625 | 
            -
              margin-left: 4px;
         | 
| 626 | 
            -
              line-height: 22px;
         | 
| 627 | 
            -
              height: 22px;
         | 
| 628 | 
            -
            }
         | 
| 629 | 
            -
            .side-nav span.badge.new,
         | 
| 630 | 
            -
            .collapsible span.badge.new {
         | 
| 631 | 
            -
              &::before {
         | 
| 632 | 
            -
                content: '';
         | 
| 633 | 
            -
                position: absolute;
         | 
| 634 | 
            -
                top: 10px;
         | 
| 635 | 
            -
                right: 0;
         | 
| 636 | 
            -
                bottom: 10px;
         | 
| 637 | 
            -
                left: 0;
         | 
| 638 | 
            -
                background-color: $badge-bg-color;
         | 
| 639 | 
            -
                border-radius: 2px;
         | 
| 640 | 
            -
                z-index: -1;
         | 
| 641 | 
            -
              }
         | 
| 642 | 
            -
             | 
| 643 | 
            -
              position: relative;
         | 
| 644 | 
            -
              background-color: transparent;
         | 
| 645 | 
            -
            }
         | 
| 646 | 
            -
            .collapsible span.badge.new {
         | 
| 647 | 
            -
              z-index: 1;
         | 
| 648 | 
            -
            }
         | 
| 649 | 
            -
             | 
| 650 | 
            -
             | 
| 651 | 
            -
             | 
| 652 596 | 
             
            // Responsive Videos
         | 
| 653 597 | 
             
            .video-container {
         | 
| 654 598 | 
             
                position: relative;
         | 
| @@ -1,38 +1,39 @@ | |
| 1 1 | 
             
            .materialboxed {
         | 
| 2 | 
            -
              display: block;
         | 
| 3 | 
            -
              cursor: zoom-in;
         | 
| 4 | 
            -
              position: relative;
         | 
| 5 | 
            -
              transition: opacity .4s;
         | 
| 6 | 
            -
             | 
| 7 2 | 
             
              &:hover {
         | 
| 8 3 | 
             
                &:not(.active) {
         | 
| 9 4 | 
             
                  opacity: .8;
         | 
| 10 5 | 
             
                }
         | 
| 11 | 
            -
                will-change: left, top, width, height;
         | 
| 12 6 | 
             
              }
         | 
| 13 | 
            -
            }
         | 
| 14 7 |  | 
| 15 | 
            -
             | 
| 16 | 
            -
              cursor: zoom- | 
| 8 | 
            +
              display: block;
         | 
| 9 | 
            +
              cursor: zoom-in;
         | 
| 10 | 
            +
              position: relative;
         | 
| 11 | 
            +
              transition: opacity .4s;
         | 
| 12 | 
            +
              -webkit-backface-visibility: hidden;
         | 
| 13 | 
            +
             | 
| 14 | 
            +
              &.active {
         | 
| 15 | 
            +
                cursor: zoom-out;
         | 
| 16 | 
            +
              }
         | 
| 17 17 | 
             
            }
         | 
| 18 18 |  | 
| 19 19 | 
             
            #materialbox-overlay {
         | 
| 20 20 | 
             
              position:fixed;
         | 
| 21 | 
            -
              top:0;
         | 
| 22 | 
            -
              left:0;
         | 
| 21 | 
            +
              top: 0;
         | 
| 23 22 | 
             
              right: 0;
         | 
| 24 23 | 
             
              bottom: 0;
         | 
| 24 | 
            +
              left: 0;
         | 
| 25 25 | 
             
              background-color: #292929;
         | 
| 26 26 | 
             
              z-index: 1000;
         | 
| 27 | 
            -
             | 
| 28 27 | 
             
              will-change: opacity;
         | 
| 29 28 | 
             
            }
         | 
| 29 | 
            +
             | 
| 30 30 | 
             
            .materialbox-caption {
         | 
| 31 31 | 
             
              position: fixed;
         | 
| 32 32 | 
             
              display: none;
         | 
| 33 33 | 
             
              color: #fff;
         | 
| 34 34 | 
             
              line-height: 50px;
         | 
| 35 35 | 
             
              bottom: 0;
         | 
| 36 | 
            +
              left: 0;
         | 
| 36 37 | 
             
              width: 100%;
         | 
| 37 38 | 
             
              text-align: center;
         | 
| 38 39 | 
             
              padding: 0% 15%;
         | 
| @@ -3,8 +3,14 @@ nav { | |
| 3 3 | 
             
                height: auto;
         | 
| 4 4 |  | 
| 5 5 | 
             
                .nav-wrapper {
         | 
| 6 | 
            +
                  min-height: $navbar-height-mobile;
         | 
| 6 7 | 
             
                  height: auto;
         | 
| 7 8 | 
             
                }
         | 
| 9 | 
            +
             | 
| 10 | 
            +
                .nav-content {
         | 
| 11 | 
            +
                  position: relative;
         | 
| 12 | 
            +
                  line-height: normal;
         | 
| 13 | 
            +
                }
         | 
| 8 14 | 
             
              }
         | 
| 9 15 |  | 
| 10 16 | 
             
              color: $navbar-font-color;
         | 
| @@ -12,7 +18,7 @@ nav { | |
| 12 18 | 
             
              background-color: $primary-color;
         | 
| 13 19 | 
             
              width: 100%;
         | 
| 14 20 | 
             
              height: $navbar-height-mobile;
         | 
| 15 | 
            -
              line-height: $navbar-height-mobile;
         | 
| 21 | 
            +
              line-height: $navbar-line-height-mobile;
         | 
| 16 22 |  | 
| 17 23 | 
             
              a { color: $navbar-font-color; }
         | 
| 18 24 |  | 
| @@ -22,7 +28,7 @@ nav { | |
| 22 28 | 
             
                display: block;
         | 
| 23 29 | 
             
                font-size: 24px;
         | 
| 24 30 | 
             
                height: $navbar-height-mobile;
         | 
| 25 | 
            -
                line-height: $navbar-height-mobile;
         | 
| 31 | 
            +
                line-height: $navbar-line-height-mobile;
         | 
| 26 32 | 
             
              }
         | 
| 27 33 |  | 
| 28 34 | 
             
              .nav-wrapper {
         | 
| @@ -45,7 +51,7 @@ nav { | |
| 45 51 |  | 
| 46 52 | 
             
                i {
         | 
| 47 53 | 
             
                  height: $navbar-height-mobile;
         | 
| 48 | 
            -
                  line-height: $navbar-height-mobile;
         | 
| 54 | 
            +
                  line-height: $navbar-line-height-mobile;
         | 
| 49 55 | 
             
                }
         | 
| 50 56 | 
             
              }
         | 
| 51 57 |  | 
| @@ -94,6 +100,14 @@ nav { | |
| 94 100 | 
             
              }
         | 
| 95 101 |  | 
| 96 102 |  | 
| 103 | 
            +
              // Title
         | 
| 104 | 
            +
              .nav-title {
         | 
| 105 | 
            +
                display: inline-block;
         | 
| 106 | 
            +
                font-size: 32px;
         | 
| 107 | 
            +
                padding: 28px 0;
         | 
| 108 | 
            +
              }
         | 
| 109 | 
            +
             | 
| 110 | 
            +
             | 
| 97 111 | 
             
              // Navbar Links
         | 
| 98 112 | 
             
              ul {
         | 
| 99 113 | 
             
                margin: 0;
         | 
| @@ -119,6 +133,11 @@ nav { | |
| 119 133 | 
             
                    margin-top: -2px;
         | 
| 120 134 | 
             
                    margin-left: 15px;
         | 
| 121 135 | 
             
                    margin-right: 15px;
         | 
| 136 | 
            +
             | 
| 137 | 
            +
                    & > .material-icons {
         | 
| 138 | 
            +
                      height: inherit;
         | 
| 139 | 
            +
                      line-height: inherit;
         | 
| 140 | 
            +
                    }
         | 
| 122 141 | 
             
                  }
         | 
| 123 142 |  | 
| 124 143 | 
             
                  &:hover {
         | 
| @@ -162,9 +181,6 @@ nav { | |
| 162 181 | 
             
                    transition: color .3s;
         | 
| 163 182 | 
             
                  }
         | 
| 164 183 | 
             
                  &.active i { color: $navbar-font-color; }
         | 
| 165 | 
            -
                  &.active {
         | 
| 166 | 
            -
                    transform: translateY(0);
         | 
| 167 | 
            -
                  }
         | 
| 168 184 | 
             
                }
         | 
| 169 185 | 
             
              }
         | 
| 170 186 | 
             
            }
         | 
| @@ -180,9 +196,12 @@ nav { | |
| 180 196 | 
             
              }
         | 
| 181 197 | 
             
            }
         | 
| 182 198 | 
             
            @media #{$medium-and-up} {
         | 
| 199 | 
            +
              nav.nav-extended .nav-wrapper {
         | 
| 200 | 
            +
                min-height: $navbar-height;
         | 
| 201 | 
            +
              }
         | 
| 183 202 | 
             
              nav, nav .nav-wrapper i, nav a.button-collapse, nav a.button-collapse i {
         | 
| 184 203 | 
             
                height: $navbar-height;
         | 
| 185 | 
            -
                line-height: $navbar-height;
         | 
| 204 | 
            +
                line-height: $navbar-line-height;
         | 
| 186 205 | 
             
              }
         | 
| 187 206 | 
             
              .navbar-fixed {
         | 
| 188 207 | 
             
                height: $navbar-height;
         | 
| @@ -33,7 +33,7 @@ | |
| 33 33 |  | 
| 34 34 | 
             
              li {
         | 
| 35 35 | 
             
                float: none;
         | 
| 36 | 
            -
                line-height: $sidenav- | 
| 36 | 
            +
                line-height: $sidenav-line-height;
         | 
| 37 37 |  | 
| 38 38 | 
             
                &.active { background-color: rgba(0,0,0,.05); }
         | 
| 39 39 | 
             
              }
         | 
| @@ -44,7 +44,7 @@ | |
| 44 44 | 
             
                font-size: $sidenav-font-size;
         | 
| 45 45 | 
             
                font-weight: 500;
         | 
| 46 46 | 
             
                height: $sidenav-item-height;
         | 
| 47 | 
            -
                line-height: $sidenav- | 
| 47 | 
            +
                line-height: $sidenav-line-height;
         | 
| 48 48 | 
             
                padding: 0 ($sidenav-padding * 2);
         | 
| 49 49 |  | 
| 50 50 | 
             
                &:hover { background-color: rgba(0,0,0,.05);}
         | 
| @@ -68,7 +68,7 @@ | |
| 68 68 | 
             
              li > a > i.material-icons {
         | 
| 69 69 | 
             
                float: left;
         | 
| 70 70 | 
             
                height: $sidenav-item-height;
         | 
| 71 | 
            -
                line-height: $sidenav- | 
| 71 | 
            +
                line-height: $sidenav-line-height;
         | 
| 72 72 | 
             
                margin: 0 ($sidenav-padding * 2) 0 0;
         | 
| 73 73 | 
             
                width: $sidenav-item-height / 2;
         | 
| 74 74 | 
             
                color: rgba(0,0,0,.54);
         | 
| @@ -88,7 +88,7 @@ | |
| 88 88 | 
             
                color: rgba(0,0,0,.54);
         | 
| 89 89 | 
             
                font-size: $sidenav-font-size;
         | 
| 90 90 | 
             
                font-weight: 500;
         | 
| 91 | 
            -
                line-height: $sidenav- | 
| 91 | 
            +
                line-height: $sidenav-line-height;
         | 
| 92 92 | 
             
              }
         | 
| 93 93 |  | 
| 94 94 | 
             
              .userView {
         | 
| @@ -124,7 +124,7 @@ | |
| 124 124 | 
             
                .name,
         | 
| 125 125 | 
             
                .email {
         | 
| 126 126 | 
             
                  font-size: $sidenav-font-size;
         | 
| 127 | 
            -
                  line-height:  | 
| 127 | 
            +
                  line-height: $sidenav-line-height / 2;
         | 
| 128 128 | 
             
                }
         | 
| 129 129 |  | 
| 130 130 | 
             
                .name {
         | 
| @@ -22,12 +22,12 @@ | |
| 22 22 | 
             
                &:hover {
         | 
| 23 23 | 
             
                  color: lighten(#757575, 20%);
         | 
| 24 24 | 
             
                  padding-left: 19px;
         | 
| 25 | 
            -
                  border-left: 1px solid  | 
| 25 | 
            +
                  border-left: 1px solid $primary-color;
         | 
| 26 26 | 
             
                }
         | 
| 27 27 | 
             
                &.active {
         | 
| 28 28 | 
             
                  font-weight: 500;
         | 
| 29 29 | 
             
                  padding-left: 18px;
         | 
| 30 | 
            -
                  border-left: 2px solid  | 
| 30 | 
            +
                  border-left: 2px solid $primary-color;
         | 
| 31 31 | 
             
                }
         | 
| 32 32 | 
             
              }
         | 
| 33 33 | 
             
            }
         | 
| @@ -8,7 +8,6 @@ | |
| 8 8 | 
             
              min-height: 36px;
         | 
| 9 9 | 
             
              line-height: 120%;
         | 
| 10 10 | 
             
              opacity: 0;
         | 
| 11 | 
            -
              display: none;
         | 
| 12 11 | 
             
              position: absolute;
         | 
| 13 12 | 
             
              text-align: center;
         | 
| 14 13 | 
             
              max-width: calc(100% - 4px);
         | 
| @@ -16,17 +15,17 @@ | |
| 16 15 | 
             
              left: 0;
         | 
| 17 16 | 
             
              top: 0;
         | 
| 18 17 | 
             
              pointer-events: none;
         | 
| 18 | 
            +
              visibility: hidden;
         | 
| 19 19 | 
             
            }
         | 
| 20 20 |  | 
| 21 21 | 
             
            .backdrop {
         | 
| 22 22 | 
             
              position: absolute;
         | 
| 23 23 | 
             
              opacity: 0;
         | 
| 24 | 
            -
              display: none;
         | 
| 25 24 | 
             
              height: 7px;
         | 
| 26 25 | 
             
              width: 14px;
         | 
| 27 26 | 
             
              border-radius: 0 0 50% 50%;
         | 
| 28 27 | 
             
              background-color: #323232;
         | 
| 29 28 | 
             
              z-index: -1;
         | 
| 30 29 | 
             
              transform-origin: 50% 0%;
         | 
| 31 | 
            -
               | 
| 30 | 
            +
              visibility: hidden;
         | 
| 32 31 | 
             
            }
         | 
| @@ -0,0 +1,13 @@ | |
| 1 | 
            +
            // Scale transition
         | 
| 2 | 
            +
            .scale-transition {
         | 
| 3 | 
            +
              &.scale-out {
         | 
| 4 | 
            +
                transform: scale(0);
         | 
| 5 | 
            +
                transition: transform .2s !important;
         | 
| 6 | 
            +
              }
         | 
| 7 | 
            +
             | 
| 8 | 
            +
              &.scale-in {
         | 
| 9 | 
            +
                transform: scale(1);
         | 
| 10 | 
            +
              }
         | 
| 11 | 
            +
             | 
| 12 | 
            +
              transition: transform .3s cubic-bezier(0.53, 0.01, 0.36, 1.63) !important;
         | 
| 13 | 
            +
            }
         | 
| @@ -47,6 +47,7 @@ $link-color: color("light-blue", "darken-1") !default; | |
| 47 47 | 
             
            // ==========================================================================
         | 
| 48 48 |  | 
| 49 49 | 
             
            $badge-bg-color: $secondary-color !default;
         | 
| 50 | 
            +
            $badge-height: 22px !default;
         | 
| 50 51 |  | 
| 51 52 |  | 
| 52 53 | 
             
            // 3. Buttons
         | 
| @@ -89,7 +90,7 @@ $button-floating-radius: 50% !default; | |
| 89 90 | 
             
            // 4. Cards
         | 
| 90 91 | 
             
            // ==========================================================================
         | 
| 91 92 |  | 
| 92 | 
            -
            $card-padding:  | 
| 93 | 
            +
            $card-padding: 24px !default;
         | 
| 93 94 | 
             
            $card-bg-color: #fff !default;
         | 
| 94 95 | 
             
            $card-link-color: color("orange", "accent-2") !default;
         | 
| 95 96 | 
             
            $card-link-color-light: lighten($card-link-color, 20%) !default;
         | 
| @@ -99,6 +100,7 @@ $card-link-color-light: lighten($card-link-color, 20%) !default; | |
| 99 100 | 
             
            // ==========================================================================
         | 
| 100 101 |  | 
| 101 102 | 
             
            $collapsible-height: 3rem !default;
         | 
| 103 | 
            +
            $collapsible-line-height: $collapsible-height !default;
         | 
| 102 104 | 
             
            $collapsible-header-color: #fff !default;
         | 
| 103 105 | 
             
            $collapsible-border-color: #ddd !default;
         | 
| 104 106 |  | 
| @@ -217,7 +219,9 @@ $element-bottom-margin: ($gutter-width*2)/3 !default; | |
| 217 219 | 
             
            // ==========================================================================
         | 
| 218 220 |  | 
| 219 221 | 
             
            $navbar-height: 64px !default;
         | 
| 222 | 
            +
            $navbar-line-height: $navbar-height !default;
         | 
| 220 223 | 
             
            $navbar-height-mobile: 56px !default;
         | 
| 224 | 
            +
            $navbar-line-height-mobile: $navbar-height-mobile !default;
         | 
| 221 225 | 
             
            $navbar-font-size: 1rem !default;
         | 
| 222 226 | 
             
            $navbar-font-color: #fff !default;
         | 
| 223 227 | 
             
            $navbar-brand-font-size: 2.1rem !default;
         | 
| @@ -230,6 +234,7 @@ $sidenav-font-color: rgba(0,0,0,.87) !default; | |
| 230 234 | 
             
            $sidenav-bg-color: #fff !default;
         | 
| 231 235 | 
             
            $sidenav-padding: 16px !default;
         | 
| 232 236 | 
             
            $sidenav-item-height: 48px !default;
         | 
| 237 | 
            +
            $sidenav-line-height: $sidenav-item-height !default;
         | 
| 233 238 |  | 
| 234 239 |  | 
| 235 240 | 
             
            // 15. Photo Slider
         | 
| @@ -305,6 +310,7 @@ $collection-active-bg-color: $secondary-color !default; | |
| 305 310 | 
             
            $collection-active-color: lighten($secondary-color, 55%) !default;
         | 
| 306 311 | 
             
            $collection-hover-bg-color: #ddd !default;
         | 
| 307 312 | 
             
            $collection-link-color: $secondary-color !default;
         | 
| 313 | 
            +
            $collection-line-height: 1.5rem !default;
         | 
| 308 314 |  | 
| 309 315 |  | 
| 310 316 | 
             
            // 24. Progress Bar
         |