now-ui-kit-rails 0.0.1

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

@@ -0,0 +1,136 @@
+.pagination{
+    .page-item .page-link{
+        border: 0;
+        border-radius: 30px !important;
+        transition: all .3s;
+        padding: 0px 11px;
+        margin: 0 3px;
+        min-width: 30px;
+        text-align: center;
+        height: 30px;
+        line-height: 30px;
+        color: $black-color;
+        cursor: pointer;
+        font-size: $font-size-base;
+        text-transform: uppercase;
+        background: transparent;
+
+        &:hover,
+        &:focus{
+            color: $black-color;
+            background-color: $opacity-gray-3;
+            border: none;
+        }
+    }
+
+    .arrow-margin-left,
+    .arrow-margin-right{
+        position: absolute;
+    }
+
+    .arrow-margin-right{
+        right: 0;
+    }
+
+    .arrow-margin-left{
+        left: 0;
+    }
+
+    .page-item.active > .page-link{
+        color: $light-gray;
+        box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
+
+        &,
+        &:focus,
+        &:hover{
+            background-color: $default-color;
+            border-color: $default-color;
+            color: $white-color;
+        }
+    }
+
+    .page-item.disabled > .page-link{
+        opacity: .5;
+        background-color: rgba(255,255,255, .2);
+        color: $white-color;
+    }
+
+    // Colors
+    &.pagination-info{
+        .page-item.active > .page-link{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-info;
+                border-color: $brand-info;
+            }
+        }
+    }
+
+    &.pagination-success{
+        .page-item.active > .page-link{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-success;
+                border-color: $brand-success;
+            }
+        }
+    }
+
+    &.pagination-primary{
+        .page-item.active > .page-link{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-primary;
+                border-color: $brand-primary;
+            }
+        }
+    }
+
+    &.pagination-warning{
+        .page-item.active > .page-link{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-warning;
+                border-color: $brand-warning;
+            }
+        }
+    }
+
+    &.pagination-danger{
+        .page-item.active > .page-link{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $brand-danger;
+                border-color: $brand-danger;
+            }
+        }
+    }
+
+    &.pagination-neutral{
+        .page-item > .page-link{
+            color: $white-color;
+
+            &:focus,
+            &:hover{
+                background-color: $opacity-2;
+                color: $white-color;
+            }
+        }
+
+        .page-item.active > .page-link{
+            &,
+            &:focus,
+            &:hover{
+                background-color: $white-bg;
+                border-color: $white-bg;
+                color: $brand-primary;
+            }
+        }
+    }
+
+}

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

@@ -0,0 +1,131 @@
+.nav-pills{
+
+    .nav-item {
+        .nav-link{
+            padding: 0 15.5px;
+            text-align: center;
+            height: 60px;
+            width: 60px;
+            font-weight: $font-weight-normal;
+            color: $dark-gray;
+            margin-right: 19px;
+            background-color: $opacity-gray-3;
+            border-radius: $btn-round-radius;
+
+            &:hover{
+                background-color: $opacity-gray-3;
+            }
+
+            &.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $dark-gray;
+                    color: $white-color;
+                    box-shadow: 0px 5px 35px 0px rgba(0, 0, 0, 0.3);
+                }
+            }
+
+            &.disabled,
+            &:disabled,
+            &[disabled]{
+                opacity: .5;
+            }
+        }
+
+        i{
+            display: block;
+            font-size: 20px;
+            line-height: 60px;
+        }
+    }
+
+    &.nav-pills-neutral{
+        .nav-item {
+            .nav-link{
+                background-color: $opacity-2;
+                color: $white-color;
+
+                &.active{
+                    &,
+                    &:focus,
+                    &:hover{
+                        background-color: $white-color;
+                        color: $primary-color;
+                    }
+                }
+            }
+        }
+    }
+
+    &.nav-pills-primary{
+        .nav-item {
+            .nav-link.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-primary;
+                }
+            }
+        }
+    }
+
+    &.nav-pills-info{
+        .nav-item {
+            .nav-link.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-info;
+                }
+            }
+        }
+    }
+
+    &.nav-pills-success{
+        .nav-item {
+            .nav-link.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-success;
+                }
+            }
+        }
+    }
+
+    &.nav-pills-warning{
+        .nav-item {
+            .nav-link.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-warning;
+                }
+            }
+        }
+    }
+
+    &.nav-pills-danger{
+        .nav-item {
+            .nav-link.active{
+                &,
+                &:focus,
+                &:hover{
+                    background-color: $brand-danger;
+                }
+            }
+        }
+    }
+}
+.tab-space{
+    padding: 20px 0 50px 0px;
+}
+
+.nav-align-center{
+    text-align: center;
+
+    .nav-pills{
+        display: inline-flex;
+    }
+}

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

@@ -0,0 +1,75 @@
+.popover{
+    font-size: $font-size-base;
+    box-shadow: 0px 10px 50px 0px rgba(0, 0, 0, 0.2);
+    border: none;
+    line-height: 1.7;
+    max-width: 240px;
+
+    .popover-title{
+        color: $default-color-opacity;
+        font-size: $font-size-base;
+        text-transform: uppercase;
+        font-weight: $font-weight-semi;
+        margin: 0;
+        margin-top: 5px;
+        border: none;
+        background-color: transparent;
+    }
+
+    &:before{
+        display: none;
+    }
+
+    &.bs-tether-element-attached-top:after{
+        border-bottom-color:$white-color;
+        top: -9px;
+    }
+
+    &.popover-primary{
+        @include popover-color($primary-color, $white-color);
+    }
+
+    &.popover-info{
+        @include popover-color($info-color, $white-color);
+    }
+
+    &.popover-warning{
+        @include popover-color($warning-color, $white-color);
+    }
+
+    &.popover-danger{
+        @include popover-color($danger-color, $white-color);
+    }
+
+    &.popover-success{
+        @include popover-color($success-color, $white-color);
+    }
+}
+
+
+.tooltip{
+    &.bs-tether-element-attached-right .tooltip-inner:before{
+        border-left-color:$white-color;
+    }
+
+    &.bs-tether-element-attached-top .tooltip-inner:before{
+        border-bottom-color:$white-color;
+    }
+
+    &.bs-tether-element-attached-bottom .tooltip-inner:before{
+        border-top-color:$white-color;
+    }
+
+    &.bs-tether-element-attached-left .tooltip-inner:before{
+        border-right-color:$white-color;
+    }
+}
+
+.tooltip-inner{
+    padding: $padding-base-vertical $padding-base-horizontal;
+    min-width: 130px;
+    background-color: $white-color;
+    font-size: $font-size-base;
+    color: inherit;
+    box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.2);
+}

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

@@ -0,0 +1,126 @@
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+.progress-container{
+    position: relative;
+
+    & + .progress-container,
+    & ~ .progress-container{
+        margin-top: $margin-base-vertical;
+    }
+    .progress-badge{
+        color: $default-color;
+        font-size: $font-size-small;
+        text-transform: uppercase;
+
+    }
+
+    .progress {
+        height: 1px;
+        border-radius: 0;
+        box-shadow: none;
+        background: $opacity-gray-5;
+        margin-top: 14px;
+
+        .progress-bar {
+            box-shadow: none;
+            background-color: $default-color;
+        }
+
+        .progress-value{
+            position: absolute;
+            top: 2px;
+            right: 0;
+            color: $default-color;
+            font-size: $font-size-small;
+        }
+    }
+
+    &.progress-neutral{
+        .progress{
+            background: rgba(255, 255, 255, .3);
+        }
+
+        .progress-bar{
+            background: $white-bg;
+        }
+
+        .progress-value,
+        .progress-badge{
+            color: $white-color;
+        }
+    }
+
+    &.progress-primary{
+        .progress{
+            background: $primary-color-opacity;
+        }
+
+        .progress-bar{
+            background: $brand-primary;
+        }
+
+        .progress-value,
+        .progress-badge{
+            color: $brand-primary;
+        }
+    }
+
+    &.progress-info{
+        .progress{
+            background: $info-color-opacity;
+        }
+
+        .progress-bar{
+            background: $brand-info;
+        }
+
+        .progress-value,
+        .progress-badge{
+            color: $brand-info;
+        }
+    }
+
+    &.progress-success{
+        .progress{
+            background: $success-color-opacity;
+        }
+
+        .progress-bar{
+            background: $brand-success;
+        }
+
+        .progress-value,
+        .progress-badge{
+            color: $brand-success;
+        }
+    }
+
+    &.progress-warning{
+        .progress{
+            background: $warning-color-opacity;
+        }
+
+        .progress-bar{
+            background: $brand-warning;
+        }
+
+        .progress-value,
+        .progress-badge{
+            color: $brand-warning;
+        }
+    }
+
+    &.progress-danger{
+        .progress{
+            background: $danger-color-opacity;
+        }
+
+        .progress-bar{
+            background: $brand-danger;
+        }
+
+        .progress-value,
+        .progress-badge{
+            color: $brand-danger;
+        }
+    }
+}