now-ui-kit-rails 0.0.1

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

@@ -0,0 +1,106 @@
+.dropdown-menu{
+    border: 0;
+    box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
+    border-radius: $border-radius-extra-small;
+    @include transition($fast-transition-time, $transition-linear);
+    font-size: $font-size-base;
+
+    &.dropdown-menu-right{
+        &:before{
+            left:auto;
+            right: 10px;
+        }
+    }
+
+    &:before{
+        display: inline-block;
+        position: absolute;
+        width: 0;
+        height: 0;
+        vertical-align: middle;
+        content: "";
+        top: -5px;
+        left: 10px;
+        right: auto;
+        color: $white-color;
+        border-bottom: .4em solid;
+        border-right: .4em solid transparent;
+        border-left: .4em solid transparent;
+    }
+
+    .dropdown-item{
+        font-size: $font-size-small;
+        padding-top: $padding-base-vertical;
+        padding-bottom: $padding-base-vertical;
+        @include transition($fast-transition-time, $transition-linear);
+
+        &:hover,
+        &:focus{
+            background-color: $opacity-gray-3;
+        }
+    }
+
+    .dropdown-divider{
+        background-color: $opacity-gray-5;
+    }
+
+    .dropdown-header:not([href]):not([tabindex]){
+        color: $default-color-opacity;
+        font-size: $font-size-mini;
+        text-transform: uppercase;
+        font-weight: $font-weight-bold;
+    }
+
+    &.dropdown-primary{
+        @include dropdown-colors(darken($primary-color, 3%),$opacity-8,$white-color, $opacity-2);
+    }
+
+    &.dropdown-info{
+        @include dropdown-colors(darken($info-color, 3%),$opacity-8,$white-color, $opacity-2);
+    }
+
+    &.dropdown-danger{
+        @include dropdown-colors(darken($danger-color, 3%),$opacity-8,$white-color, $opacity-2);
+    }
+
+    &.dropdown-success{
+        @include dropdown-colors(darken($success-color, 3%),$opacity-8,$white-color, $opacity-2);
+    }
+
+    &.dropdown-warning{
+        @include dropdown-colors(darken($warning-color, 3%),$opacity-8,$white-color, $opacity-2);
+    }
+
+    .dropdown &{
+        @include transform-translate-y(-25px);
+        visibility: hidden;
+        display: block;
+        @include opacity(0);
+    }
+
+    .dropdown.show &,
+    &.open{
+        @include opacity(1);
+        visibility: visible;
+        @include transform-translate-y(0px);
+    }
+
+    .navbar .dropdown.show &{
+        @include transform-translate-y(7px);
+    }
+}
+
+.button-dropdown{
+    padding-right: $padding-base-horizontal;
+    cursor: pointer;
+
+    & .dropdown-toggle{
+        padding-top: $padding-base-vertical;
+        padding-bottom: $padding-base-vertical;
+        display: block;
+
+        &:after{
+            display: none;
+        }
+    }
+}

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

@@ -0,0 +1,256 @@
+// style for the landing page
+.index-page{
+    .page-header{
+        height: 125vh;
+
+        .container{
+            > .content-center{
+                top: 37%;
+            }
+        }
+
+        .category-absolute{
+            position: absolute;
+            top: 100vh;
+            margin-top: -60px;
+            padding: 0 15px;
+            width: 100%;
+            color: rgba(255,255,255,.5);
+        }
+    }
+}
+.landing-page{
+
+    .header{
+        height: 100vh;
+        position: relative;
+
+        .container{
+            padding-top: 26vh;
+            color: #FFFFFF;
+            z-index: 2;
+            position: relative;
+        }
+
+        .share{
+            margin-top: 150px;
+        }
+        h1{
+            font-weight: 600;
+        }
+        .title{
+            color: $white-color;
+        }
+    }
+
+    .section-team{
+        .team .team-player img{
+            max-width: 100px;
+        }
+
+        .team-player{
+            margin-bottom: 15px;
+        }
+    }
+
+    .section-contact-us{
+        .title{
+            margin-bottom: 15px;
+        }
+
+        .description{
+            margin-bottom: 30px;
+        }
+
+        .input-group,
+        .send-button,
+        .textarea-container{
+            padding: 0 40px;
+        }
+
+        .textarea-container{
+            margin: 40px 0;
+        }
+
+        a.btn{
+            margin-top: 35px;
+        }
+    }
+}
+
+// style for the profile page
+.profile-page{
+
+    .page-header{
+        min-height: 550px;
+    }
+
+    .profile-container{
+        color: #FFFFFF;
+    }
+    .photo-container{
+        width: 123px;
+        height: 123px;
+        border-radius: 50%;
+        overflow: hidden;
+        margin: 0 auto;
+        box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.3);
+    }
+
+    .title{
+        text-align: center;
+        margin-top: 30px;
+    }
+
+    .description,
+    .category{
+        text-align: center;
+    }
+
+    h5.description{
+        max-width: 700px;
+        margin: 20px auto 75px;
+    }
+
+    .nav-align-center{
+        margin-top: 30px;
+    }
+
+    .content{
+        max-width: 450px;
+        margin: 0 auto;
+
+        .social-description{
+            display: inline-block;
+            max-width: 150px;
+            width: 145px;
+            text-align: center;
+            margin: 15px 0 0px;
+
+            h2{
+                margin-bottom: 15px;
+            }
+        }
+    }
+
+    .button-container{
+        text-align: center;
+        margin-top: -99px;
+    }
+
+    .collections{
+        img{
+            margin-bottom: 30px;
+        }
+    }
+
+    .gallery{
+        margin-top: 45px;
+        padding-bottom: 50px;
+    }
+}
+
+.section-full-page{
+
+    &:after,
+    &:before{
+        display: block;
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+    }
+
+    &:before{
+        background-color: rgba(0,0,0,.5);
+    }
+
+    &[filter-color="purple"],
+    &[filter-color="primary"]{
+        &:after{
+            @include linear-gradient(rgba($light-gray,.26), rgba($primary-color,.95));
+
+        }
+
+    }
+
+    &[data-image]:after{
+        opacity: .5;
+    }
+
+    > .content,
+    > .footer{
+        position: relative;
+        z-index: 4;
+    }
+
+    > .content{
+        min-height: calc(100vh - 80px);
+    }
+
+    .full-page-background{
+        position: absolute;
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        display: block;
+        top: 0;
+        left: 0;
+        background-size: cover;
+        background-position: center center;
+
+    }
+
+    .footer nav > ul a:not(.btn),
+    .footer,
+    .footer .copyright a{
+        color: $white-color;
+    }
+
+}
+
+.login-page{
+
+    .card-login{
+        border-radius: $border-radius-large;
+        padding-bottom: $padding-base-horizontal;
+        max-width: 320px;
+
+        .btn-wd{
+            min-width: 180px;
+        }
+
+        .logo-container{
+            width: 65px;
+            margin: 0 auto;
+            margin-bottom: 55px;
+
+            img{
+                width: 100%;
+            }
+        }
+
+        .input-group:last-child{
+            margin-bottom: 40px;
+        }
+
+        &.card-plain{
+            @include input-coloured-bg($opacity-5, $white-color, $white-color, $transparent-bg, $opacity-1, $opacity-2);
+
+            .input-group-addon,
+            .form-group.form-group-no-border .input-group-addon,
+            .input-group.form-group-no-border .input-group-addon{
+                color: $opacity-8;
+            }
+        }
+    }
+
+    .link{
+        font-size: 10px;
+        color: $white-color;
+        text-decoration: none;
+    }
+}

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

@@ -0,0 +1,45 @@
+.footer{
+    padding: 24px 0;
+
+    &.footer-default{
+        background-color: #f2f2f2;
+    }
+
+    nav{
+        display: inline-block;
+        float: left;
+    }
+
+    ul{
+        margin-bottom: 0;
+        padding: 0;
+        list-style: none;
+
+        li{
+            display: inline-block;
+
+            a{
+                color: inherit;
+                padding: $padding-base-vertical;
+                font-size: $font-size-small;
+                text-transform: uppercase;
+                text-decoration: none;
+
+                &:hover{
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+
+    .copyright{
+        font-size: $font-size-small;
+        line-height: 1.8;
+    }
+
+    &:after{
+        display: table;
+        clear: both;
+        content: " ";
+    }
+}

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

@@ -0,0 +1,7 @@
+img{
+    max-width: 100%;
+    border-radius: 1px;
+}
+.img-raised{
+    box-shadow: $box-shadow-raised;
+}

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

@@ -0,0 +1,248 @@
+@include form-control-placeholder($medium-gray, 1);
+
+.form-control {
+    background-color: $transparent-bg;
+    border: 1px solid $light-gray;
+    border-radius: $btn-round-radius;
+    color: $black-color;
+    line-height: 1em;
+    font-size: $font-size-small;
+    @include transition-input-focus-color();
+    @include box-shadow(none);
+
+    .has-success &{
+        border-color: $light-gray;
+    }
+
+    &:focus{
+        border: 1px solid $primary-color;
+        @include box-shadow(none);
+        outline: 0 !important;
+        color: $black-color;
+
+        & + .input-group-addon,
+        & ~ .input-group-addon{
+            border: 1px solid $primary-color;
+            border-left: none;
+            background-color: $transparent-bg;
+        }
+    }
+
+    .has-success &,
+    .has-error &,
+    .has-success &:focus,
+    .has-error &:focus{
+        @include box-shadow(none);
+    }
+
+    .has-danger &,
+    .has-success &{
+        &.form-control-success,
+        &.form-control-danger{
+            background-image: none;
+        }
+    }
+
+    .has-danger &{
+        background-color: lighten($danger-color, 30%);
+        border-color: lighten($danger-color, 30%);
+        color: $danger-color;
+
+        &:focus{
+            background-color: $opacity-gray-3;
+        }
+    }
+
+    & + .form-control-feedback{
+        border-radius: $border-radius-large;
+        font-size: $font-size-base;
+        margin-top: -7px;
+        position: absolute;
+        right: 10px;
+        top: 50%;
+        vertical-align: middle;
+    }
+
+    .open &{
+        border-radius: $border-radius-large $border-radius-large 0 0;
+        border-bottom-color: transparent;
+    }
+
+    & + .input-group-addon{
+        background-color: $white-bg;
+    }
+}
+
+.has-success,
+.has-danger{
+    &:after{
+        font-family: 'Nucleo Outline';
+        content: "\ea22";
+        display: inline-block;
+        position: absolute;
+        right: 35px;
+        top: 12px;
+        color: $success-color;
+        font-size: 11px;
+    }
+
+    &.input-lg{
+        &:after{
+            font-size: 13px;
+            top: 13px;
+        }
+    }
+}
+
+.has-danger{
+    &:after{
+        content: "\ea53";
+        color: $danger-color;
+    }
+}
+
+@include input-lg-padding($padding-large-vertical, $padding-input-horizontal);
+@include input-base-padding($padding-input-vertical, $padding-input-horizontal);
+
+.form-group.form-group-no-border,
+.input-group.form-group-no-border{
+    .form-control,
+    .form-control + .input-group-addon{
+        background-color: $opacity-gray-3;
+        border: medium none;
+        &:focus,
+        &:active,
+        &:active{
+            border: medium none;
+            background-color: $opacity-gray-5;
+        }
+    }
+
+    .form-control{
+        &:focus{
+            & + .input-group-addon{
+                background-color: $opacity-gray-5;
+            }
+        }
+    }
+
+    .input-group-addon{
+        background-color: $opacity-gray-3;
+        border: none;
+    }
+}
+
+.has-error{
+    .form-control-feedback, .control-label{
+        color: $danger-color;
+    }
+}
+.has-success{
+    .form-control-feedback, .control-label{
+        color: $success-color;
+    }
+}
+
+.input-group-addon {
+    background-color: $white-bg;
+    border: 1px solid $light-gray;
+    border-radius: $btn-round-radius;
+    color: $dark-background;
+    padding: $padding-base-vertical - 1 0 $padding-base-vertical - 1 $padding-base-horizontal - 1;
+
+    @include transition-input-focus-color();
+
+    .has-success &,
+    .has-danger &{
+        background-color: $white-color;
+    }
+    .has-danger .form-control:focus + &{
+        color: $danger-color;
+    }
+    .has-success .form-control:focus + &{
+        color: $success-color;
+    }
+
+    & + .form-control,
+    & ~ .form-control{
+        @include input-size($padding-base-vertical - 1, $padding-base-horizontal);
+        padding-left: 18px;
+    }
+}
+
+.input-group-focus{
+    .input-group-addon{
+        background-color: $white-bg;
+        border-color: $primary-color;
+    }
+
+    &.form-group-no-border{
+        .input-group-addon{
+            background-color: $opacity-gray-5;
+        }
+    }
+}
+
+.input-group,
+.form-group{
+    margin-bottom: 10px;
+}
+.input-group[disabled]{
+    .input-group-addon{
+        background-color: $light-gray;
+    }
+}
+.input-group .form-control:first-child,
+.input-group-addon:first-child,
+.input-group-btn:first-child > .dropdown-toggle,
+.input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {
+    border-right: 0 none;
+}
+.input-group .form-control:last-child,
+.input-group-addon:last-child,
+.input-group-btn:last-child > .dropdown-toggle,
+.input-group-btn:first-child > .btn:not(:first-child) {
+    border-left: 0 none;
+}
+.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
+    background-color: $light-gray;
+    color: $default-color;
+    cursor: not-allowed;
+}
+
+.input-group-btn .btn{
+    border-width: $border-thin;
+    padding: $padding-btn-vertical  $padding-base-horizontal;
+}
+.input-group-btn .btn-default:not(.btn-fill){
+    border-color: $medium-gray;
+}
+
+.input-group-btn:last-child > .btn{
+    margin-left: 0;
+}
+textarea.form-control{
+    max-width: 100%;
+    padding: 10px 10px 0 0;
+    resize: none;
+    border: none;
+    border-bottom: 1px solid $light-gray;
+    border-radius: 0;
+    line-height: 2;
+
+    &:focus,
+    &:active{
+        border-left: none;
+        border-top: none;
+        border-right: none;
+    }
+}
+
+.has-success,
+.has-danger{
+
+    &.form-group .form-control,
+    &.form-group.form-group-no-border .form-control{
+        padding-right: $padding-input-horizontal + 21;
+    }
+}