creative-dashpaper-gem 0.0.1

data/vendor/assets/stylesheets/paper/_responsive.scss

@@ -0,0 +1,447 @@
+@media (min-width: 992px){
+    .navbar{
+        min-height: 75px;
+    }
+    .navbar-form {
+        margin-top: 21px;
+        margin-bottom: 21px;
+        padding-left: 5px;
+        padding-right: 5px;
+    }
+    .navbar-search-form{
+        display: none;
+    }
+    .navbar-nav > li > .dropdown-menu,
+    .dropdown .dropdown-menu{
+        transform: translate3d(0px, -40px, 0px);
+        transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s, opacity 0.3s ease 0s, height 0s linear 0.35s;
+    }
+    .navbar-nav > li.open > .dropdown-menu, .dropdown.open .dropdown-menu{
+        transform: translate3d(0px, 0px, 0px);
+    }
+
+    .navbar-nav > li > .dropdown-menu:before{
+        border-bottom: 11px solid $medium-pale-bg;
+        border-left: 11px solid rgba(0, 0, 0, 0);
+        border-right: 11px solid rgba(0, 0, 0, 0);
+        content: "";
+        display: inline-block;
+        position: absolute;
+        right: 12px;
+        top: -11px;
+    }
+    .navbar-nav > li > .dropdown-menu:after {
+        border-bottom: 11px solid $pale-bg;
+        border-left: 11px solid rgba(0, 0, 0, 0);
+        border-right: 11px solid rgba(0, 0, 0, 0);
+        content: "";
+        display: inline-block;
+        position: absolute;
+        right: 12px;
+        top: -10px;
+    }
+
+    .navbar-nav.navbar-left > li > .dropdown-menu:before{
+        right: auto;
+        left: 12px;
+    }
+
+    .navbar-nav.navbar-left > li > .dropdown-menu:after{
+        right: auto;
+        left: 12px;
+    }
+
+    .navbar{
+        .navbar-header{
+            margin-left: 10px;
+        }
+    }
+
+    .footer:not(.footer-big){
+        nav > ul{
+           li:first-child{
+             margin-left: 0;
+           }
+        }
+    }
+
+    body > .navbar-collapse.collapse{
+        display: none !important;
+    }
+
+    .card{
+        form{
+            [class*="col-"]{
+                padding: 6px;
+            }
+            [class*="col-"]:first-child{
+                padding-left: 15px;
+            }
+            [class*="col-"]:last-child{
+                padding-right: 15px;
+            }
+        }
+    }
+}
+
+/*          Changes for small display      */
+
+@media (max-width: 991px){
+    .sidebar{
+        display: none;
+    }
+
+    .main-panel{
+        width: 100%;
+    }
+    .navbar-transparent{
+        padding-top: 15px;
+        background-color: rgba(0, 0, 0, 0.45);
+    }
+    body {
+         position: relative;
+    }
+    h6{
+        font-size: 1em;
+    }
+    .wrapper{
+       @include transform-translate-x(0px);
+       @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+       left: 0;
+       background-color: white;
+    }
+    .navbar .container{
+         left: 0;
+          width: 100%;
+         @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+         position: relative;
+    }
+    .navbar .navbar-collapse.collapse,
+    .navbar .navbar-collapse.collapse.in,
+    .navbar .navbar-collapse.collapsing{
+        display: none !important;
+    }
+
+    .navbar-nav > li{
+        float: none;
+        position: relative;
+        display: block;
+    }
+
+    .off-canvas-sidebar {
+        position: fixed;
+        display: block;
+        top: 0;
+        height: 100%;
+        width: 230px;
+        right: 0;
+        z-index: 1032;
+        visibility: visible;
+        background-color: #999;
+        overflow-y: visible;
+        border-top: none;
+        text-align: left;
+        padding-right: 0px;
+        padding-left: 0;
+
+        @include transform-translate-x(230px);
+        @include transition (0.33s, cubic-bezier(0.685, 0.0473, 0.346, 1));
+
+        .sidebar-wrapper {
+            position: relative;
+            z-index: 3;
+            overflow-y: scroll;
+            height: 100%;
+            box-shadow: inset 1px 0px 0px 0px $medium-gray;
+        }
+
+        .nav{
+            margin-top: 0;
+            padding: 10px $margin-base-vertical 0;
+
+            > li{
+
+                > a{
+                    margin: 0px 0px;
+                    color: $default-color;
+                    text-transform: uppercase;
+                    font-weight: 600;
+                    font-size: $font-size-small;
+                    line-height: $line-height-general;
+                    padding: 10px 0;
+
+                    &:hover,
+                    &.active{
+                        color: $default-states-color;
+                    }
+
+                    p,
+                    .notification,
+                    .caret,
+                    {
+                        display: inline-block;
+                    }
+
+                    .caret{
+                        float: right;
+                        position: relative;
+                        top: 12px;
+                    }
+
+                    i{
+                        font-size: 18px;
+                        margin-right: 10px;
+                        line-height: 26px;
+                    }
+                }
+
+                &.active > a{
+
+                    &:before{
+                        border-right: none;
+                        border-left:  12px solid $medium-gray;
+                        border-top: 12px solid transparent;
+                        border-bottom: 12px solid transparent;
+                        right: auto;
+                        margin-left: -$margin-base-vertical;
+                        left: 0px;
+                        top: 10px;
+                    }
+
+                    &:after{
+                        border-right: none;
+                        border-left: 12px solid $bg-nude;
+                        border-top: 12px solid transparent;
+                        border-bottom: 12px solid transparent;
+                        right: auto;
+                        margin-left: -$margin-base-vertical;
+                        left: -1px;
+                        top: 10px;
+                    }
+                }
+
+            }
+
+
+
+        }
+
+        &::after{
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            position: absolute;
+            background-color: $bg-nude;
+            background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(112, 112, 112, 0) 60%, rgba(186, 186, 186, 0.15) 100%);
+            display: block;
+            content: "";
+            z-index: 1;
+        }
+        &.has-image::after{
+            @include black-filter(.8);
+        }
+
+        .logo{
+            position: relative;
+            z-index: 4;
+            padding-top: 11px;
+            padding-bottom: 11px;
+        }
+
+        .divider{
+            height: 1px;
+            margin: 10px 0;
+        }
+    }
+    .nav-open .navbar-collapse{
+        @include transform-translate-x(0px);
+    }
+    .nav-open .navbar .container{
+        left: -230px;
+    }
+    .nav-open .wrapper{
+        left: 0;
+        @include transform-translate-x(-230px);
+    }
+    .navbar-toggle .icon-bar {
+          display: block;
+          position: relative;
+          background: #fff;
+          width: 24px;
+          height: 2px;
+          border-radius: 1px;
+          margin: 0 auto;
+    }
+
+    .navbar-header .navbar-toggle {
+        margin: 10px 15px 10px 0;
+        width: 40px;
+        height: 40px;
+    }
+    .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;}
+    }
+
+    .dropdown-menu .divider{
+        background-color: rgba(229, 229, 229, 0.15);
+    }
+
+    .navbar-nav {
+        margin: 1px 0;
+    }
+
+    .dropdown-menu {
+        display: none;
+
+        & > li > a{
+            &:hover,
+            &:focus{
+                background-color: transparent;
+            }
+        }
+    }
+
+    .navbar-fixed-top {
+        -webkit-backface-visibility: hidden;
+    }
+    #bodyClick {
+        height: 100%;
+        width: 100%;
+        position: fixed;
+        opacity: 0;
+        top: 0;
+        left: auto;
+        right: 230px;
+        content: "";
+        z-index: 9999;
+        overflow-x: hidden;
+    }
+    .form-control + .form-control-feedback{
+        margin-top: -8px;
+    }
+    .navbar-toggle:hover,.navbar-toggle:focus {
+        background-color: transparent !important;
+    }
+    .btn.dropdown-toggle{
+        margin-bottom: 0;
+    }
+    .media-post .author{
+        width: 20%;
+        float: none !important;
+        display: block;
+        margin: 0 auto 10px;
+    }
+    .media-post .media-body{
+        width: 100%;
+    }
+
+    .navbar-collapse.collapse{
+        height: 100% !important;
+    }
+    .navbar-collapse.collapse.in {
+        display: block;
+    }
+    .navbar-header .collapse, .navbar-toggle {
+        display:block !important;
+    }
+    .navbar-header {
+        float:none;
+    }
+    .navbar-nav .open .dropdown-menu {
+        position: static;
+        float: none;
+        width: auto;
+        margin-top: 0;
+        background-color: transparent;
+        border: 0;
+        -webkit-box-shadow: none;
+        box-shadow: none;
+    }
+
+    .main-panel > .content{
+        padding-left: 0;
+        padding-right: 0;
+    }
+    .nav .open > a{
+        &,
+        &:focus,
+        &:hover{
+            background-color: transparent;
+        }
+
+    }
+
+    .footer .copyright{
+        padding: 0px 15px;
+        width: 100%;
+    }
+}
+
+//overwrite table responsive for 768px screens
+
+@media (min-width: 992px){
+    .table-full-width{
+        margin-left: -15px;
+        margin-right: -15px;
+    }
+    .table-responsive{
+        overflow: visible;
+    }
+
+}
+
+@media (max-width: 991px){
+    .table-responsive {
+        width: 100%;
+        margin-bottom: 15px;
+        border: 1px solid #dddddd;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        -webkit-overflow-scrolling: touch;
+    }
+
+}

data/vendor/assets/stylesheets/paper/_sidebar-and-main-panel.scss

@@ -0,0 +1,195 @@
+.sidebar{
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    background-size: cover;
+    background-position: center center;
+    .sidebar-wrapper{
+        position: relative;
+        max-height: none;
+        min-height: 100%;
+        overflow: hidden;
+        width: 260px;
+        z-index: 4;
+        box-shadow: inset -1px 0px 0px 0px $medium-gray;
+    }
+    .sidebar-background{
+        position: absolute;
+        z-index: 1;
+        height: 100%;
+        width: 100%;
+        display: block;
+        top: 0;
+        left: 0;
+        background-size: cover;
+        background-position: center center;
+    }
+
+}
+.sidebar,
+.off-canvas-sidebar{
+    width: 260px;
+    display: block;
+    font-weight: 200;
+
+    .logo{
+        padding: 18px 0px;
+        margin: 0 20px;
+
+        p{
+            float: left;
+            font-size: 20px;
+            margin: 10px 10px;
+            line-height: 20px;
+        }
+
+        .simple-text{
+            text-transform: uppercase;
+            padding: $padding-small-vertical $padding-zero;
+            display: block;
+            font-size: $font-size-large;
+            text-align: center;
+            font-weight: $font-weight-normal;
+            line-height: 30px;
+        }
+    }
+
+    .nav{
+        margin-top: 20px;
+
+        li{
+            > a{
+                margin: 10px 0px;
+                padding-left: 25px;
+                padding-right: 25px;
+
+                opacity: .7;
+            }
+
+            &:hover > a{
+                opacity: 1;
+            }
+
+            &.active > a{
+                color: $primary-color;
+                opacity: 1;
+
+                &:before{
+                    border-right: 17px solid $medium-gray;
+                    border-top: 17px solid transparent;
+                    border-bottom: 17px solid transparent;
+                    content: "";
+                    display: inline-block;
+                    position: absolute;
+                    right: 0;
+                    top: 8px;
+                }
+
+                &:after{
+                    border-right: 17px solid $bg-nude;
+                    border-top: 17px solid transparent;
+                    border-bottom: 17px solid transparent;
+                    content: "";
+                    display: inline-block;
+                    position: absolute;
+                    right: -1px;
+                    top: 8px;
+                }
+            }
+        }
+
+        p{
+            margin: 0;
+            line-height: 30px;
+            font-size: 12px;
+            font-weight: 600;
+            text-transform: uppercase;
+        }
+
+        i{
+            font-size: 24px;
+            float: left;
+            margin-right: 15px;
+            line-height: 30px;
+            width: 30px;
+            text-align: center;
+        }
+    }
+
+    &:after,
+    &:before{
+        display: block;
+        content: "";
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        z-index: 2;
+        background:  $white-background-color;
+    }
+
+    &,
+    &[data-background-color="white"]{
+        @include sidebar-background-color($white-background-color, $default-color);
+    }
+    &[data-background-color="black"]{
+        @include sidebar-background-color($black-background-color, $white-color);
+    }
+
+    &[data-active-color="primary"]{
+        @include sidebar-active-color($primary-color);
+    }
+    &[data-active-color="info"]{
+        @include sidebar-active-color($info-color);
+    }
+    &[data-active-color="success"]{
+        @include sidebar-active-color($success-color);
+    }
+    &[data-active-color="warning"]{
+        @include sidebar-active-color($warning-color);
+    }
+    &[data-active-color="danger"]{
+        @include sidebar-active-color($danger-color);
+    }
+
+}
+
+.main-panel{
+    background-color: $bg-nude;
+    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(112, 112, 112, 0) 60%, rgba(186, 186, 186, 0.15) 100%);
+    position: relative;
+    z-index: 2;
+    float: right;
+    width: $sidebar-width;
+    min-height: 100%;
+
+    > .content{
+        padding: 30px 15px;
+        min-height: calc(100% - 123px);
+    }
+
+    > .footer{
+        border-top: 1px solid rgba(0, 0, 0, 0.1);
+    }
+
+    .navbar{
+        margin-bottom: 0;
+    }
+}
+
+.sidebar,
+.main-panel{
+    overflow: auto;
+    max-height: 100%;
+    height: 100%;
+    -webkit-transition-property: top,bottom;
+    transition-property: top,bottom;
+    -webkit-transition-duration: .2s,.2s;
+    transition-duration: .2s,.2s;
+    -webkit-transition-timing-function: linear,linear;
+    transition-timing-function: linear,linear;
+    -webkit-overflow-scrolling: touch;
+}