now-ui-kit-rails 0.0.4 → 0.0.5

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

@@ -46,6 +46,7 @@
         height: 100%;
         z-index: 1;
         text-align: center;
+        position: relative;
 
         > .content-center{
             position: absolute;
@@ -57,6 +58,7 @@
             transform: translate(-50%,-50%);
 
             text-align: center;
+            padding: 0 15px;
             color: #FFFFFF;
             width: 100%;
             max-width: 880px;
@@ -111,29 +113,25 @@
     .image-container{
         height: 335px;
         position: relative;
+        background-position: center center;
+        background-size: cover;
+        box-shadow: $box-shadow-raised;
+        border-radius: .25rem;
+
+        & + .category{
+            padding-top: 15px;
+        }
 
         &.image-right{
+            z-index: 2;
+
             + h3.title{
                 margin-top: 120px;
             }
-
-            img{
-                z-index: 2;
-            }
         }
 
         &.image-left{
-            img{
-                z-index: 1;
-            }
-        }
-
-        img{
-            width: 100%;
-            left: 0;
-            top: 0;
-            height: auto;
-            position: absolute;
+            z-index: 1;
         }
 
         &:nth-child(2){
@@ -147,7 +145,7 @@
         min-height: 180px;
         text-align: left;
         position: absolute;
-        top: 365px;
+        top: 376px;
         right: 155px;
         z-index: 0;
     }
@@ -308,16 +306,30 @@
     .title,
     .social-description h2,
     p,
-    h1,h2,h3,h4,h5,h6,a:not(.btn),
+    p.blockquote,
+    p.blockquote small,
+    h1,h2,h3,h4,h5,h6,a:not(.btn):not(.dropdown-item),
     .icons-container i{
         color: $white-color;
     }
 
+    .separator{
+        background-color: $white-color;
+    }
+
+    .navbar.bg-white p{
+        color: $default-color;
+    }
+
     .description,
     .social-description p{
         color: $opacity-8;
     }
 
+    p.blockquote{
+        border-color: $opacity-2;
+    }
+
     //radio and checkboxes
     .checkbox label::before,
     .checkbox label::after,

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

@@ -9,6 +9,10 @@ h1,h2,h3,h4,h5,h6{
     font-weight: $font-weight-normal;
 }
 
+small{
+    font-size: 60%;
+}
+
 a{
     color: $primary-color;
     &:hover,
@@ -60,6 +64,7 @@ h6, .h6{
 p{
     line-height: 1.61em;
 
+    .description &,
     &.description{
         font-size: 1.14em;
     }
@@ -107,6 +112,9 @@ p{
 .text-danger {
   color: $brand-danger !important;
 }
+.text-black{
+  color: $light-black;
+}
 
 .blockquote{
     border-left: none;

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

@@ -13,6 +13,7 @@ $white-bg:                   #FFFFFF !default;
 $orange-bg:                  #e95e38 !default;
 
 $smoke-bg:                   #F5F5F5 !default;
+$light-black:                #444    !default;
 
 $black-bg:                   rgba(30,30,30,.97) !default;
 
@@ -25,6 +26,8 @@ $dark-gray:                  #9A9A9A !default;
 
 $opacity-gray-3:             rgba(222,222,222, .3) !default;
 $opacity-gray-5:             rgba(222,222,222, .5) !default;
+$opacity-gray-8:             rgba(222,222,222, .8) !default;
+
 
 $opacity-5:                  rgba(255,255,255, .5) !default;
 $opacity-8:                  rgba(255,255,255, .8) !default;
@@ -39,32 +42,32 @@ $opacity-2:                  rgba(255,255,255, .2) !default;
 $transparent-bg:             transparent !default;
 $dark-background:            #555555 !default;
 
-$default-color:              #B8B8B8 !default;
-$default-states-color:       darken($default-color, 5%) !default;
+$default-color:              #888 !default;
+$default-states-color:       lighten($default-color, 6%) !default;
 $default-color-opacity:      rgba(182, 182, 182, .6) !default;
 
 $primary-color:              #f96332 !default;
-$primary-states-color:       darken($primary-color, 5%) !default;
+$primary-states-color:       lighten($primary-color, 6%) !default;
 $primary-color-opacity:      rgba(249, 99, 50, .3) !default;
 $primary-color-alert:        rgba(249, 99, 50, .8) !default;
 
 $success-color:              #18ce0f !default;
-$success-states-color:       darken($success-color, 5%) !default;
+$success-states-color:       lighten($success-color, 6%) !default;
 $success-color-opacity:      rgba(24, 206, 15, .3) !default;
 $success-color-alert:        rgba(24, 206, 15, .8) !default;
 
 $info-color:                 #2CA8FF !default;
-$info-states-color:          #109CFF !default;
+$info-states-color:          lighten($info-color, 6%) !default;
 $info-color-opacity:         rgba(44, 168, 255, .3) !default;
 $info-color-alert:           rgba(44, 168, 255, .8) !default;
 
 $warning-color:              #FFB236 !default;
-$warning-states-color:       darken($warning-color, 5%) !default;
+$warning-states-color:       lighten($warning-color, 6%) !default;
 $warning-color-opacity:      rgba(255, 178, 54, .3) !default;
 $warning-color-alert:        rgba(255, 178, 54, .8) !default;
 
 $danger-color:               #FF3636 !default;
-$danger-states-color:        darken($danger-color, 5%) !default;
+$danger-states-color:        lighten($danger-color, 6%) !default;
 $danger-color-opacity:       rgba(255, 54, 54, .3) !default;
 $danger-color-alert:         rgba(255, 54, 54, .8) !default;
 
@@ -133,10 +136,13 @@ $btn-round-radius:             30px         !default;
 
 $height-base:                  55px         !default;
 
-$btn-icon-font-size:            24px        !default;
-$btn-icon-size:                 56px        !default;
-$btn-icon-size-mini:            36px        !default;
-$btn-icon-font-size-mini:       14px        !default;
+$btn-icon-size:                 3.5rem       !default;
+$btn-icon-size-regular:         2.375rem      !default;
+$btn-icon-font-size-regular:    0.9375rem     !default;
+$btn-icon-font-size-small:      0.6875rem      !default;
+$btn-icon-size-small:           1.875rem     !default;
+$btn-icon-font-size-lg:         1.325rem     !default;
+$btn-icon-size-lg:              3.6rem         !default;
 
 $font-size-h1:                 3.5em        !default; // ~ 49px
 $font-size-h2:                 2.5em        !default; // ~ 35px

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

@@ -10,11 +10,16 @@
     &:active:hover,
     &.active:focus,
     &.active:hover,
-    .open > &.dropdown-toggle,
-    .open > &.dropdown-toggle:focus,
-    .open > &.dropdown-toggle:hover {
+    .show > &.dropdown-toggle,
+    .show > &.dropdown-toggle:focus,
+    .show > &.dropdown-toggle:hover {
         background-color: $btn-states-color;
         color: $white-color;
+        box-shadow: none;
+    }
+
+    &:hover{
+        box-shadow:  0 3px 8px 0 rgba(0,0,0, 0.17);
     }
 
     &.disabled,
@@ -32,11 +37,6 @@
         }
     }
 
-    &.focus,
-    &:focus{
-        box-shadow: none;
-    }
-
     // btn-neutral style
     @if $btn-color == $white-color{
         color: $primary-color;
@@ -92,21 +92,27 @@
         }
 
         &.active,
+        &:active,
         &:active:focus,
         &:active:hover,
         &.active:focus,
         &.active:hover,
-        .open > &.dropdown-toggle,
-        .open > &.dropdown-toggle:focus,
-        .open > &.dropdown-toggle:hover {
+        .show > &.dropdown-toggle,
+        .show > &.dropdown-toggle:focus,
+        .show > &.dropdown-toggle:hover {
             background-color: $white-color;
-            color: $primary-color;
+            color: $primary-states-color;
+            box-shadow: none;
         }
 
         &:hover,
-        &:focus,
-        &:active{
+        &:focus{
             color: $primary-states-color;
+
+            &:not(.nav-link){
+                box-shadow: none;
+            }
+
         }
 
     } @else {
@@ -123,6 +129,7 @@
             background-color: $transparent-bg;
             color: $btn-states-color;
             border-color: $btn-states-color;
+            box-shadow: none;
         }
     }
 
@@ -135,6 +142,7 @@
             background-color: $transparent-bg;
             color: $btn-states-color;
             text-decoration: none;
+            box-shadow: none;
         }
     }
 }

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

@@ -0,0 +1,226 @@
+@mixin navbar-responsive() {
+    .navbar{
+        .navbar-nav{
+            margin-top: 53px;
+
+            .nav-link{
+                padding-top: 0.75rem;
+                padding-bottom: .75rem;
+            }
+
+            &.navbar-logo{
+                top: 0;
+                height: 53px;
+            }
+        }
+
+        .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-bottom: 15px;
+            padding-top: 0;
+            height: 150px;
+            overflow-y: scroll;
+
+            &:before{
+                display: none;
+            }
+        }
+
+        .dropdown{
+            .dropdown-item{
+                padding-left: 2.5rem;
+            }
+
+            .dropdown-menu{
+               display: none;
+           }
+
+           &.show .dropdown-menu{
+               display: block;
+           }
+        }
+
+        .dropdown-menu .dropdown-item:focus,
+        .dropdown-menu .dropdown-item:hover{
+            color: $white-color;
+        }
+
+        .navbar-translate{
+            width: 100%;
+            position: relative;
+            display: flex;
+            -ms-flex-pack: justify!important;
+            justify-content: space-between!important;
+            -ms-flex-align: center;
+            align-items: center;
+            @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;
+            }
+
+            &.bar2{
+                width: 17px;
+                transition: width .2s linear;
+            }
+        }
+
+        &.bg-white:not(.navbar-transparent) .navbar-toggler-bar{
+            background: $default-color;
+        }
+
+        & .toggled .navbar-toggler-bar{
+            width: 24px;
+
+            & + .navbar-toggler-bar{
+                margin-top: 5px;
+            }
+        }
+
+    }
+
+    .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;}
+    }
+}
+
+@mixin navbar-collapse() {
+    .navbar-collapse{
+        position: fixed;
+        display: block;
+        top: 0;
+        height: 100% !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));
+
+        &: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;
+                margin-top: 0.3125rem;
+
+                &:not(.btn){
+                    color: $white-color;
+                }
+            }
+        }
+
+        .dropdown-menu .dropdown-item{
+            color: $white-color;
+        }
+    }
+
+    @include navbar-responsive();
+
+
+    [class*="navbar-expand-"] .navbar-collapse{
+        width: 300px;
+    }
+
+    .wrapper{
+        @include transition (0.50s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+    }
+
+    #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));
+    }
+
+}