now-ui-kit-rails 0.0.4 → 0.0.5

data/app/assets/stylesheets/now-ui-kit.scss

@@ -1,7 +1,7 @@
 /*!
 
  =========================================================
- * Now-ui-kit - v1.0.0
+ * Now-ui-kit - v1.1.0
  =========================================================
 
  * Product Page: http://www.creative-tim.com/product/now-ui-kit

data/app/assets/stylesheets/now-ui-kit/_alerts.scss

@@ -5,6 +5,7 @@
     color: $white-color;
     padding-top: .9rem;
     padding-bottom: .9rem;
+    position: relative;
 
     &.alert-success{
         background-color: $success-color-alert;

data/app/assets/stylesheets/now-ui-kit/_buttons.scss

@@ -1,8 +1,10 @@
-.btn{
+.btn,
+.navbar .navbar-nav > a.btn{
     border-width: $border-thick;
     font-weight: $font-weight-normal;
     font-size: $font-size-small;
     line-height: $line-height;
+    margin: 5px 1px;
     border: none;
     border-radius: $border-radius-small;
     padding: $padding-btn-vertical $padding-btn-horizontal;
@@ -24,53 +26,51 @@
 
     &.btn-icon {
         // see above for color variations
-        border-radius: 50%;
-        font-size: $btn-icon-font-size;
-        height: $btn-icon-size;
-        margin: auto;
-        min-width: $btn-icon-size;
-        width: $btn-icon-size;
+        height: $btn-icon-size-regular;
+        min-width: $btn-icon-size-regular;
+        width: $btn-icon-size-regular;
         padding: 0;
+        font-size: $btn-icon-font-size-regular;
         overflow: hidden;
         position: relative;
         line-height: normal;
 
         &.btn-simple{
             padding: 0;
+        }
+
+        &.btn-sm{
+            height: $btn-icon-size-small;
+            min-width: $btn-icon-size-small;
+            width: $btn-icon-size-small;
 
             i.fa,
             i.now-ui-icons{
-                line-height: $btn-icon-line-height + 0.2;
-            }
-
-            &.btn-icon-mini{
-                i.fa,
-                i.now-ui-icons{
-                    line-height: $btn-icon-line-height - 0.2;
-                }
+                font-size: $btn-icon-font-size-small;
             }
         }
 
-        &.btn-icon-mini{
-            height: $btn-icon-size-mini;
-            min-width: $btn-icon-size-mini;
-            width: $btn-icon-size-mini;
+        &.btn-lg{
+            height: $btn-icon-size-lg;
+            min-width: $btn-icon-size-lg;
+            width: $btn-icon-size-lg;
 
-            .fa,
-            .now-ui-icons{
-                font-size: $btn-icon-font-size-mini;
-                line-height: $btn-icon-line-height - 0.2;
+            i.now-ui-icons,
+            i.fa{
+                font-size: $btn-icon-font-size-lg;
             }
         }
 
-        i.fa,
-        i.now-ui-icons{
-            line-height: $btn-icon-line-height;
+        &:not(.btn-footer) i.now-ui-icons,
+        &:not(.btn-footer) i.fa{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-12px, -12px);
+            line-height: 1.5626rem;
+            width: 25px;
         }
 
-        i.now-ui-icons{
-            font-size: 22px;
-        }
     }
 
     &:not(.btn-icon) .now-ui-icons{
@@ -80,7 +80,7 @@
 }
 
 // Apply the mixin to the buttons
-//.btn-default { @include btn-styles($default-color, $default-states-color); }
+// .btn-default { @include btn-styles($default-color, $default-states-color); }
 .btn-primary { @include btn-styles($primary-color, $primary-states-color); }
 .btn-success { @include btn-styles($success-color, $success-states-color); }
 .btn-info    { @include btn-styles($info-color, $info-states-color); }

data/app/assets/stylesheets/now-ui-kit/_cards.scss

@@ -8,7 +8,7 @@
     margin-bottom: 20px;
     box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
 
-    .card-block{
+    .card-body{
         min-height: 190px;
     }
 
@@ -47,8 +47,10 @@
         margin-bottom: 0px;
         text-align: center;
     }
-    .content{
-        padding: 0px 30px;
+    .card-body{
+        padding-top: 0px;
+        padding-bottom: 0px;
+        min-height: auto;
     }
 
     .checkbox{

data/app/assets/stylesheets/now-ui-kit/_example-pages.scss

@@ -135,7 +135,7 @@
 
     .button-container{
         text-align: center;
-        margin-top: -99px;
+        margin-top: -106px;
     }
 
     .collections{

data/app/assets/stylesheets/now-ui-kit/_footers.scss

@@ -34,7 +34,6 @@
 
     .copyright{
         font-size: $font-size-small;
-        line-height: 1.8;
     }
 
     &:after{

data/app/assets/stylesheets/now-ui-kit/_inputs.scss

@@ -5,7 +5,7 @@
     border: 1px solid $light-gray;
     border-radius: $btn-round-radius;
     color: $black-color;
-    line-height: 1em;
+    line-height: normal;
     font-size: $font-size-small;
     @include transition-input-focus-color();
     @include box-shadow(none);
@@ -35,6 +35,11 @@
         @include box-shadow(none);
     }
 
+    .has-success &:focus{
+        border-color: lighten($success-color, 5%);
+    }
+
+
     .has-danger &,
     .has-success &{
         &.form-control-success,
@@ -44,22 +49,22 @@
     }
 
     .has-danger &{
-        background-color: lighten($danger-color, 30%);
         border-color: lighten($danger-color, 30%);
         color: $danger-color;
+        background-color: rgba(222,222,222, .1);
 
         &:focus{
-            background-color: $opacity-gray-3;
+            background-color: $white-color;
         }
     }
 
     & + .form-control-feedback{
         border-radius: $border-radius-large;
         font-size: $font-size-base;
-        margin-top: -7px;
+        margin-top: 0;
         position: absolute;
-        right: 10px;
-        top: 50%;
+        left: 18px;
+        bottom: -20px;
         vertical-align: middle;
     }
 
@@ -80,8 +85,8 @@
         content: "\ea22";
         display: inline-block;
         position: absolute;
-        right: 35px;
-        top: 12px;
+        right: 15px;
+        bottom: 10px;
         color: $success-color;
         font-size: 11px;
     }
@@ -168,6 +173,10 @@
         @include input-size($padding-base-vertical - 1, $padding-base-horizontal);
         padding-left: 18px;
     }
+
+    i{
+        width: 17px;
+    }
 }
 
 .input-group-focus{
@@ -246,3 +255,10 @@ textarea.form-control{
         padding-right: $padding-input-horizontal + 21;
     }
 }
+
+.form-group{
+    position:relative;
+}
+.form-group.has-error, .form-group.has-danger{
+    margin-bottom: 20px;
+}

data/app/assets/stylesheets/now-ui-kit/_misc.scss

@@ -12,6 +12,7 @@ body{
 }
 /* Animations */
 .nav-pills .nav-link,
+.nav-item .nav-link,
 .navbar,
 .nav-tabs .nav-link{
     @include transition($general-transition-time, $transition-ease);

data/app/assets/stylesheets/now-ui-kit/_mixins.scss

@@ -7,6 +7,7 @@
 @import "mixins/inputs";
 @import "mixins/dropdown";
 @import "mixins/badges";
+@import "mixins/navbar";
 @import "mixins/popovers";
 @import "mixins/modals";
 @import "mixins/pages";

data/app/assets/stylesheets/now-ui-kit/_modals.scss

@@ -85,7 +85,7 @@
             background-color: $white-color;
             border-radius: 50%;
             text-align: center;
-            line-height: 5.7;
+            line-height: 5.9;
             box-shadow: 0px 5px 50px 0px rgba(0, 0, 0, 0.3);
 
             i{
@@ -155,7 +155,7 @@
         @include modal-colors($info-color, $white-color);
     }
 
-    &.show .modal-dialog{
+    &.show.modal-mini .modal-dialog{
         -webkit-transform: translate(0,30%);
         -o-transform: translate(0,30%);
         transform: translate(0,30%);

data/app/assets/stylesheets/now-ui-kit/_navbar.scss

@@ -6,8 +6,11 @@
     box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
 
     a{
-        color: $white-color;
         vertical-align: middle;
+
+        &:not(.btn):not(.dropdown-item){
+            color: $white-color;
+        }
     }
 
     p{
@@ -26,7 +29,19 @@
             top: -4px;
         }
 
-        .nav-link{
+        .nav-link.btn{
+            padding: $padding-btn-vertical $padding-btn-horizontal;
+
+            &.btn-lg{
+                padding: $padding-large-vertical $padding-large-horizontal;
+            }
+
+            &.btn-sm{
+                padding: $padding-small-vertical $padding-small-horizontal;
+            }
+        }
+
+        .nav-link:not(.btn){
             text-transform: uppercase;
             font-size: $font-size-mini;
             padding: $padding-base-vertical $padding-base-horizontal;
@@ -64,17 +79,15 @@
             }
         }
 
-        .nav-item.active .nav-link{
+        .nav-item.active .nav-link:not(.btn),
+        .nav-item .nav-link:not(.btn):focus,
+        .nav-item .nav-link:not(.btn):hover,
+        .nav-item .nav-link:not(.btn):active{
             background-color: $opacity-2;
             border-radius: $border-radius-small;
         }
     }
 
-    &[class*='navbar-toggleable-'] .container{
-        padding-left: 15px;
-        padding-right: 15px;
-    }
-
     .logo-container{
         width: 27px;
         height: 27px;
@@ -95,7 +108,6 @@
     .navbar-toggler{
         width: 37px;
         height: 27px;
-        vertical-align: middle;
         outline: 0;
         cursor: pointer;
 
@@ -105,11 +117,6 @@
             padding-left: 0;
         }
 
-        &.navbar-toggler-right{
-            padding-right: 0;
-            top: 8px;
-        }
-
         &:hover{
             & .navbar-toggler-bar.bar2{
                 width: 22px;
@@ -144,7 +151,10 @@
             background: $default-color;
         }
 
-        .nav-item.active .nav-link{
+        .nav-item.active .nav-link:not(.btn),
+        .nav-item .nav-link:not(.btn):focus,
+        .nav-item .nav-link:not(.btn):hover,
+        .nav-item .nav-link:not(.btn):active{
             background-color: $opacity-gray-3;
         }
 

data/app/assets/stylesheets/now-ui-kit/_nucleo-outline.scss.erb

@@ -12,8 +12,8 @@ Created using IcoMoon - icomoon.io
   src: url('<%= font_path("nucleo-outline.eot") %>') format('embedded-opentype'),
   url('<%= font_path("nucleo-outline.woff2") %>') format('woff2'),
   url('<%= font_path("nucleo-outline.woff") %>') format('woff'),
-  url('<%= font_path("nucleo-outline.ttf") %>') format('truetype'),
-  url('<%= font_path("nucleo-outline.svg") %>') format('svg');
+  url('<%= font_path("nucleo-outline.ttf") %>') format('truetype');
+
   font-weight: normal;
   font-style: normal;
 }

data/app/assets/stylesheets/now-ui-kit/_popups.scss

@@ -5,10 +5,20 @@
     line-height: 1.7;
     max-width: 240px;
 
-    .popover-title{
+    &.bs-popover-top .arrow:before,
+    &.bs-popover-left .arrow:before,
+    &.bs-popover-right .arrow:before,
+    &.bs-popover-bottom .arrow:before,{
+        border-top-color: transparent;
+        border-left-color: transparent;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+    }
+
+    .popover-header{
         color: $default-color-opacity;
         font-size: $font-size-base;
-        text-transform: uppercase;
+        text-transform: capitalize;
         font-weight: $font-weight-semi;
         margin: 0;
         margin-top: 5px;
@@ -48,20 +58,20 @@
 
 
 .tooltip{
-    &.bs-tether-element-attached-right .tooltip-inner:before{
-        border-left-color:$white-color;
+    &.bs-tooltip-right .arrow:before{
+        border-right-color:$white-color;
     }
 
-    &.bs-tether-element-attached-top .tooltip-inner:before{
-        border-bottom-color:$white-color;
+    &.bs-tooltip-top .arrow:before{
+        border-top-color:$white-color;
     }
 
-    &.bs-tether-element-attached-bottom .tooltip-inner:before{
-        border-top-color:$white-color;
+    &.bs-tooltip-bottom .arrow:before{
+        border-bottom-color:$white-color;
     }
 
-    &.bs-tether-element-attached-left .tooltip-inner:before{
-        border-right-color:$white-color;
+    &.bs-tooltip-left .arrow:before{
+        border-left-color:$white-color;
     }
 }
 

data/app/assets/stylesheets/now-ui-kit/_progress.scss

@@ -17,7 +17,7 @@
         height: 1px;
         border-radius: 0;
         box-shadow: none;
-        background: $opacity-gray-5;
+        background: $opacity-gray-8;
         margin-top: 14px;
 
         .progress-bar {

data/app/assets/stylesheets/now-ui-kit/_responsive.scss

@@ -1,249 +1,62 @@
 @media screen and (max-width: 991px){
-    .navbar-collapse{
-        position: fixed;
-        display: block;
-        top: 0;
-        height: 100vh !important;
-        width: 300px;
-        right: 0;
-        z-index: 1032;
-        visibility: visible;
-        background-color: #999;
-        overflow-y: visible;
-        border-top: none;
-        text-align: left;
-
-        max-height: none !important;
-
-        @include transform-translate-x(300px);
-        @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+    .sidebar-collapse{
+        @include navbar-collapse();
 
-        .nav-open &{
-            @include transform-translate-x(0px);
-        }
-
-        &:before{
-            background: $brand-primary; /* For browsers that do not support gradients */
-            background: -webkit-linear-gradient($brand-primary 0%, #000 80%); /* For Safari 5.1 to 6.0 */
-            background: -o-linear-gradient($brand-primary 0%, #000 80%); /* For Opera 11.1 to 12.0 */
-            background: -moz-linear-gradient($brand-primary 0%, #000 80%); /* For Firefox 3.6 to 15 */
-            background: linear-gradient($brand-primary 0%, #000 80%); /* Standard syntax (must be last) */
-            @include opacity(.76);
-
-            display: block;
-            content: "";
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-            z-index: -1;
-        }
-
-        .navbar-nav:not(.navbar-logo){
-            .nav-link {
-                margin: 0 1rem;
-                color: $white-color;
+        &.menu-on-left{
+            .navbar-collapse{
+                right: auto;
+                left: 0;
+                @include transform-translate-x(-300px);
             }
         }
 
-        .menu-on-left &{
-            right: auto;
-            left: 0;
-            @include transform-translate-x(-300px);
-        }
-    }
-
-    .profile-photo .profile-photo-small{
-        margin-left: -2px;
-    }
-
-    [class*="navbar-toggleable-"] .navbar-collapse{
-        width: 300px;
-    }
-
-    .button-dropdown{
-        display: none;
-    }
-
-    .navbar{
-        .navbar-brand{
-            padding-top: .5rem;
-            padding-bottom: .5rem;
-        }
-
-        .navbar-nav{
-            margin-top: 53px;
-
-            .nav-link{
-                padding-top: 0.75rem;
-                padding-bottom: .75rem;
-            }
-
-            &.navbar-logo{
-                top: 0;
-                height: 53px;
+        .nav-open &{
+            .navbar-collapse{
+                @include transform-translate-x(0px);
             }
-        }
-
-        .dropdown.show .dropdown-menu,
-        .dropdown .dropdown-menu{
-            background-color: transparent;
-            border: 0;
-            transition: none;
-            -webkit-box-shadow: none;
-            box-shadow: none;
-            width: auto;
-            margin: 0 1rem;
-            margin-top: -18px;
 
-            &:before{
-                display: none;
+            .wrapper{
+                @include transform-translate-x(-150px);
             }
-        }
 
-        .dropdown-menu .dropdown-item:focus,
-        .dropdown-menu .dropdown-item:hover{
-            color: $white-color;
-        }
-
-        .navbar-translate{
-            width: 100%;
-            position: relative;
-            @include transform-translate-x(0px);
-            @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
-        }
-
-        .navbar-toggler-bar{
-            display: block;
-            position: relative;
-            width: 22px;
-            height: 1px;
-            border-radius: 1px;
-            background: $white-bg;
-
-            & + .navbar-toggler-bar{
-                margin-top: 7px;
+            .navbar-translate{
+                @include transform-translate-x(-300px);
             }
 
-            &.bar2{
-                width: 17px;
-                transition: width .2s linear;
-            }
-        }
+            &.menu-on-left{
+                .navbar-collapse{
+                    @include transform-translate-x(0px);
+                }
 
-        &.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
-            background: $default-color;
-        }
+                .navbar-translate{
+                    @include transform-translate-x(300px);
+                }
 
-        & .toggled .navbar-toggler-bar{
-            width: 24px;
+                .wrapper{
+                    @include transform-translate-x(150px);
+                }
 
-            & + .navbar-toggler-bar{
-                margin-top: 5px;
+                #bodyClick{
+                    right: auto;
+                    left: 300px;
+                }
             }
         }
-
-    }
-
-    .wrapper{
-        @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
     }
 
-    .menu-on-left .navbar-brand{
-        float: right;
-        margin-right: 0;
-        margin-left: 1rem;
-    }
-
-    .nav-open{
-        .wrapper{
-            @include transform-translate-x(-150px);
-        }
-
-        .navbar-translate{
-            @include transform-translate-x(-300px);
-        }
-
-        .menu-on-left{
-            .navbar-collapse{
-                @include transform-translate-x(0px);
-            }
-
-            .navbar-translate{
-                @include transform-translate-x(300px);
-            }
-
-            .wrapper{
-                @include transform-translate-x(150px);
-            }
-
-            #bodyClick{
-                right: auto;
-                left: 300px;
-            }
+    .bootstrap-collapse{
+        .navbar .navbar-collapse{
+            background: none !important;
         }
+        @include navbar-responsive();
     }
 
-    .bar1,
-    .bar2,
-    .bar3 {
-      outline: 1px solid transparent;
-    }
-    .bar1 {
-      top: 0px;
-      @include bar-animation($topbar-back);
-    }
-    .bar2 {
-      opacity: 1;
-    }
-    .bar3 {
-      bottom: 0px;
-      @include bar-animation($bottombar-back);
-    }
-    .toggled .bar1 {
-      top: 6px;
-      @include bar-animation($topbar-x);
-    }
-    .toggled .bar2 {
-      opacity: 0;
-    }
-    .toggled .bar3 {
-      bottom: 6px;
-      @include bar-animation($bottombar-x);
-    }
-
-    @include topbar-x-rotation();
-    @include topbar-back-rotation();
-    @include bottombar-x-rotation();
-    @include bottombar-back-rotation();
-
-    @-webkit-keyframes fadeIn {
-      0% {opacity: 0;}
-      100% {opacity: 1;}
-    }
-    @-moz-keyframes fadeIn {
-      0% {opacity: 0;}
-      100% {opacity: 1;}
-    }
-    @keyframes fadeIn {
-      0% {opacity: 0;}
-      100% {opacity: 1;}
+    .profile-photo .profile-photo-small{
+        margin-left: -2px;
     }
 
-    #bodyClick{
-        height: 100%;
-        width: 100%;
-        position: fixed;
-        opacity: 1;
-        top: 0;
-        left: auto;
-        right: 300px;
-        content: "";
-        z-index: 9999;
-        overflow-x: hidden;
-        background-color: transparent;
-        @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+    .button-dropdown{
+        display: none;
     }
 
     .section-nucleo-icons .container .row > [class*="col-"]:first-child{
@@ -289,11 +102,89 @@
             top: 93%;
         }
     }
+
+    .navbar .navbar-nav.navbar-logo{
+        display: none;
+    }
 }
 
 @media screen and (min-width: 992px){
-    .navbar-collapse{
-        background: none !important;
+    .burger-menu{
+        @include navbar-collapse();
+
+        .nav-open & .navbar-collapse{
+            @include transform-translate-x(0px);
+        }
+
+        .navbar-collapse {
+            display: block !important;
+
+            .navbar-nav {
+                margin-top: 53px;
+                height: 100%;
+                z-index: 2;
+                position: relative;
+                display: -webkit-box;
+                display: -webkit-flex;
+                display: -ms-flexbox;
+                display: flex;
+                -webkit-box-orient: vertical;
+                -webkit-box-direction: normal;
+                -webkit-flex-direction: column;
+                -ms-flex-direction: column;
+                flex-direction: column;
+
+                .nav-item{
+                    margin: 0;
+                }
+            }
+        }
+
+        &.menu-on-left .navbar-collapse{
+            right: auto;
+            left: 0;
+            @include transform-translate-x(-300px);
+        }
+
+        [class*="navbar-expand-"]{
+            .navbar-nav .dropdown-menu{
+                position: static;
+                float: none;
+            }
+
+            .navbar-toggler{
+                display: inline-block;
+            }
+        }
+
+        .section-navbars .navbar-collapse{
+            display: none !important;
+        }
+
+        .nav-open &{
+            &.menu-on-left .navbar .navbar-translate{
+                @include transform-translate-x(300px);
+            }
+
+            .navbar .navbar-translate{
+                @include transform-translate-x(-300px);
+            }
+
+            &.menu-on-left .navbar-collapse{
+                @include transform-translate-x(0px);
+            }
+
+            &.menu-on-left #bodyClick{
+                right: auto;
+                left: 300px;
+            }
+        }
+
+        &.menu-on-left .navbar-brand{
+            float: right;
+            margin-right: 0;
+            margin-left: 1rem;
+        }
     }
 
     .navbar-nav{
@@ -302,7 +193,16 @@
                 padding: 0;
                 margin: 7px $padding-base-horizontal;
             }
+
+            &.btn:not(.btn-sm){
+                margin: 0;
+            }
         }
+
+        .nav-item:not(:last-child){
+            margin-right: 5px;
+        }
+
     }
 
     .section-nucleo-icons .icons-container{
@@ -366,7 +266,7 @@
 }
 
 @media screen and (max-width: 576px){
-    .navbar[class*='navbar-toggleable-'] .container{
+    .navbar[class*='navbar-expand-'] .container{
         margin-left: 0;
         margin-right: 0;
     }
@@ -431,11 +331,11 @@
             top: 99%;
         }
     }
+}
 
-    .footer nav{
-        display: block;
-        margin-bottom: 5px;
-        float: none;
+@media screen and (max-width: 517px) {
+    .alert .alert-icon{
+        margin-top: 10px;
     }
 }
 
@@ -452,3 +352,45 @@
         }
     }
 }
+
+// Ipad responsive portrait mode
+@media only screen
+and (min-device-width : 768px)
+and (max-device-width : 1024px)
+and ( orientation : portrait){
+    .section-images .hero-images-container,
+    .section-images .hero-images-container-1,
+    .section-images .hero-images-container-2{
+        margin-top: -15vh;
+        margin-left: 80px;
+    }
+
+    .section-images .hero-images-container{
+        max-width: 300px;
+    }
+
+    .section-images .hero-images-container-1{
+        right: 28%;
+        top: 40%;
+    }
+
+    .section-images .hero-images-container-2{
+        right: 21%;
+        top: 55%;
+    }
+
+    .index-page .category-absolute{
+        top: 90vh;
+    }
+}
+
+@media screen and (max-width: 580px) {
+    .alert{
+        button.close{
+            position: absolute;
+            right: 11px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+}