znamenica/dneslov

View on GitHub
app/assets/stylesheets/lory-slider.scss

Summary

Maintainability
Test Coverage
@import "defines";

html {
   #slider-modal {
      overflow: hidden;
      background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
      filter: alpha(opacity=0);
      display: block !important;
      opacity: 1 !important;
      max-height: none;
      top: 0 !important;
      height: 0;
      box-shadow: none !important;
      border: none !important;
      max-width: 90%;
      width: -webkit-stretch;
      width: -moz-available;
      width: stretch;

      .modal-content {
         padding: 0;
         height: 100%;
      }

      &.open {
         top: 5% !important;
         height: 90%;
      }

      .lory_slider {
         margin: 0 auto 0;
         height: inherit;
         position: relative;
         -moz-user-select: none;
         max-width: fit-content;
         width: 100%;

         .frame {
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            height: inherit;
            white-space: nowrap;
            padding: 0;
            background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
            border: 0 none;

            ul.slides {
               white-space: nowrap;
               display: inline-block;
               height: inherit;
               margin: 0;
               position: relative;

               li {
                  color: #fff;
                  display: inline-block;
                  font-family: "Source Sans Pro", sans;
                  position: relative;
                  text-align: center;
                  margin-right: 1rem;
                  height: inherit;

                  img.icon {
                     height: 100%;
                     width: inherit;
                     margin-top: 0;
                     margin-bottom: 0;
                  }

                  img {
                     margin: 0.7rem;
                     background: rgba(255, 255, 255, 1) none repeat scroll 0 0;
                     box-shadow: 0 0.7rem 0.8rem 0.1rem rgba(0, 0, 0, 0.14), 0 0.2rem 1.15rem 0.15rem rgba(0, 0, 0, 0.12), 0 0.3rem 0.3rem -0.2rem rgba(0, 0, 0, 0.3)
                  }

               }

               li:nth-last-child(1) {
                  margin-right: 0;
               }
            }
         }

         .modal-action {
            background: rgba(0, 0, 0, 0.3);
            position: absolute;
            bottom: 1rem;
            display: block;
            cursor: pointer;
            right: 1rem;
            color: #DEB3AA;
         }

         .prev, .next {
            position: absolute;
            top: 50%;
            margin-top: -2rem;
            display: block;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.3);

            svg {
               width: 2rem;
            }

            &.disabled {
               display: none;
            }
         }

         .next {
            right: 0;
         }

         .prev {
            left: 0;
         }

         .prev:hover, .next:hover, .modal-action:hover {
            background: rgba(0, 0, 0, 0.5);
         }
      }
   }
}