keppler 2.0.0

data/installer/core/app/assets/stylesheets/admin/pages/_search.scss

@@ -0,0 +1,220 @@
+#search {
+  margin: 8px 0;
+  float: left;
+  width: 0;
+  animation: .5s ease-out 1s grow_width_40 forwards;
+  transition: .3s ease-in-out;
+  @include respond-to(xs) {
+    animation: none;
+  }
+  @include respond-to(sm) {
+    animation: none;
+  }
+  .input-group {
+    .search-bar {
+      border-color: #d2d6de;
+      padding: 0;
+      animation: .5s cubic-bezier(0.4, 0, 0.2, 1) 1s change_input forwards;
+      transition: .3s ease-in-out;
+      &:focus {
+        border-color: $keppler-color;
+        transition: .3s ease-in-out;
+      }
+      @include respond-to(xs) {
+        animation: none;
+      }
+      @include respond-to(sm) {
+        animation: none;
+      }
+    }
+    .input-group-btn {
+      .search-button {
+        background-color: transparent;
+        animation: .3s ease-in-out .5s change_button forwards;
+        transition: .3s ease-in-out;
+        &:active {
+          box-shadow: none;
+          outline: none;
+        }
+        @include respond-to(xs) {
+          border-radius: 1px;
+          animation: none;
+        }
+        @include respond-to(sm) {
+          border-radius: 1px;
+          animation: none;
+        }
+        .search-icon {
+          color: $keppler-color;
+          animation: .3s ease-in-out .5s change_color forwards;
+          transition: .3s ease-in-out;
+          @include respond-to(xs) {
+            animation: none;
+          }
+          @include respond-to(sm) {
+            animation: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+.hide-search {
+  display: inline-table;
+  height: 34px;
+  width: 34px;
+  padding: 5px;
+  margin: 8px;
+  color: #999;
+  opacity: 0;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: .3s 0 ease-in-out;
+  &:hover {
+    background: #eee;
+    border-radius: 1px;
+    transition: .3s 0 ease-in-out;
+  }
+  i {
+    display: table-cell;
+    text-align: center;
+    padding: 0;
+    vertical-align: middle;
+  }
+}
+
+.hide-search.appear {
+  opacity: 1;
+  transition: .3s .5s ease-in-out;
+}
+
+.navbar-nav.translate {
+  transform: translateX(100%);
+  transition: .2s .5s ease-in-out;
+}
+
+#search.display-search {
+  animation: .5s ease-in-out .5s grow_width_70 forwards;
+  .input-group {
+    .search-bar {
+      animation: .5s cubic-bezier(0.4, 0, 0.2, 1) .5s change_input forwards;
+    }
+    .input-group-btn {
+      .search-button {
+        animation: .3s ease-in-out change_button forwards;
+        .search-icon {
+          animation: .3s ease-in-out change_color forwards;
+        }
+      }
+    }
+  }
+}
+
+#search.hidding-search {
+  animation: .3s ease-out .5s width_down forwards;
+  width: 70%;
+  .input-group {
+    .search-bar {
+      animation: .5s cubic-bezier(0.4, 0, 0.2, 1) .5s hide_input forwards;
+      padding: 6px 12px;
+    }
+    .input-group-btn {
+      .search-button {
+        animation: .3s ease-in-out hide_button forwards;
+        .search-icon {
+          animation: .3s ease-in-out hide_color forwards;
+        }
+      }
+    }
+  }
+}
+
+@keyframes change_input {
+  from {
+    padding: 6px 0;
+  }
+  to {
+    padding: 6px 12px;
+  }
+}
+
+@keyframes grow_width_40 {
+  from {
+    width: 0;
+  }
+  to {
+    width: 40%;
+  }
+}
+
+@keyframes grow_width_70 {
+  from {
+    width: 0;
+  }
+  to {
+    width: 70%;
+  }
+}
+
+@keyframes change_button {
+  from {
+    background-color: transparent;
+    padding: 6px 9px;
+    border-radius: 50%;
+  }
+  to {
+    background-color: $keppler-color;
+    padding: 6px 12px;
+    border-radius: 1px;
+  }
+}
+
+@keyframes change_color {
+  from {
+    color: $keppler-color;
+  }
+  to {
+    color: #fff;
+  }
+}
+
+@keyframes hide_input {
+  from {
+    padding: 6px 12px;
+  }
+  to {
+    padding: 6px 0;
+  }
+}
+
+@keyframes width_down {
+  from {
+    width: 70%;
+  }
+  to {
+    width: 0;
+  }
+}
+
+@keyframes hide_button {
+  from {
+    background-color: $keppler-color;
+    padding: 6px 12px;
+    border-radius: 1px;
+  }
+  to {
+    background-color: transparent;
+    padding: 6px 9px;
+    border-radius: 50%;
+  }
+}
+
+@keyframes hide_color {
+  from {
+    color: #fff;
+  }
+  to {
+    color: $keppler-color;
+  }
+}

data/installer/core/app/assets/stylesheets/admin/pages/_show.scss

@@ -0,0 +1,17 @@
+.bg-profile{
+  @extend %circle-img;
+  width: 100px;
+  height: 100px;
+}
+.img-show{
+  width: 100%;
+}
+.list-row {
+  img {
+    max-width: 100%;
+    max-height: 300px;
+  }
+}
+.attr-name{
+  font-weight: bold;
+}

data/installer/core/app/assets/stylesheets/admin/pages/_sidebar.scss

@@ -0,0 +1,64 @@
+.new-message {
+  position: absolute;
+  right: 15%;
+  z-index: 1;
+  margin-top: -45px;
+}
+
+body{
+  .side-img-profile{
+    @extend %circle-img;
+    vertical-align: middle;
+    width: 45px;
+    height: 45px;
+    transition: .2s;
+  }
+  #sidebar-footer{
+    width: 100%;
+    padding: 10px;
+    position: relative;
+    bottom: 0px;
+    opacity: .1;
+    transition: .2s;
+    .brand img {
+      height: 25px;
+      margin: 0 10px;
+    }
+    span{
+      color: #fff !important;
+      font-family: Patua One;
+      top: 10px;
+      position: absolute;
+      right: 0;
+      margin: 0 20px;
+    }
+  }
+
+  ::-webkit-scrollbar{
+    display: none
+  }
+  &.sidebar-collapse{
+    .user-panel{
+      padding: {
+        left: 4px;
+        right: 2px;
+      }
+      transition: .2s;
+      .side-img-profile{
+        width: 40px;
+        height: 40px;
+        transition: .2s;
+      }
+    }
+
+    .main-sidebar{
+      #sidebar-footer{
+        padding: 4px;
+        transition: .2s;
+        .pull-right{
+          display: none;
+        }
+      }
+    }
+  }
+}

data/installer/core/app/assets/stylesheets/admin/pages/_switchs.scss

@@ -0,0 +1,47 @@
+.switch > input[type="checkbox"] {
+  display: none;
+}
+
+.switch > label {
+    cursor: pointer;
+    height: 0px;
+    position: relative;
+    width: 40px;
+}
+
+.switch > label::before {
+    background: rgb(0, 0, 0);
+    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
+    border-radius: 8px;
+    content: '';
+    height: 16px;
+    margin-top: -8px;
+    position:absolute;
+    opacity: 0.3;
+    transition: all 0.4s ease-in-out;
+    width: 40px;
+}
+
+.switch > label::after {
+    background: rgb(255, 255, 255);
+    border-radius: 16px;
+    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
+    content: '';
+    height: 24px;
+    left: -4px;
+    margin-top: -8px;
+    position: absolute;
+    top: -4px;
+    transition: all 0.3s ease-in-out;
+    width: 24px;
+}
+
+.switch > input[type="checkbox"]:checked + label::before {
+    background: inherit;
+    opacity: 0.5;
+}
+
+.switch > input[type="checkbox"]:checked + label::after {
+    background: $keppler-color;
+    left: 20px;
+}

data/installer/core/app/assets/stylesheets/admin/pages/_themes.scss

@@ -0,0 +1,74 @@
+$themes: (
+  // [label, primary-color, darken-color, accent-color]
+  ("keppler", $keppler-color, $keppler-darken, $keppler-accent),
+  ("pink", $pink-color, $pink-darken, $pink-accent),
+  ("cyan", $cyan-color, $cyan-darken, $cyan-accent),
+  ("grey", $grey-color, $grey-darken, $grey-accent),
+  ("amber", $amber-color, $amber-darken, $amber-accent),
+  ("brown", $brown-color, $brown-darken, $brown-accent)
+);
+
+@each $label, $primary-color, $darken-color, $accent-color in $themes {
+  .#{$label}-theme {
+    .devise-box-header {
+      background: $primary-color !important;
+    }
+
+    .modal-header{
+      background: $primary-color;
+    }
+
+    nav,
+    .header-information {
+      background: $primary-color;
+    }
+
+    .listing-show-header{
+      background: $darken-color;
+    }
+
+    .control-label.active {
+      color: $accent-color !important;
+    }
+
+    .btn-add,
+    .btn {
+      background: $accent-color;
+    }
+
+    .btn-white {
+      margin-right: 1rem;
+      background: #dedede;
+      color: $accent-color;
+    }
+
+    input[type=text]:focus:not([readonly]),
+    input[type=password]:focus:not([readonly]),
+    input[type=email]:focus:not([readonly]),
+    input[type=url]:focus:not([readonly]),
+    input[type=time]:focus:not([readonly]),
+    input[type=date]:focus:not([readonly]),
+    input[type=datetime-local]:focus:not([readonly]),
+    input[type=tel]:focus:not([readonly]),
+    input[type=number]:focus:not([readonly]),
+    input[type=search]:focus:not([readonly]),
+    textarea.materialize-textarea:focus:not([readonly]) {
+      border-bottom: 1px solid $accent-color;
+      box-shadow: 0 1px 0 0 $accent-color;
+    }
+
+    .checkbox_material [type="checkbox"]:checked + label:before {
+      border-bottom: 2px solid $accent-color;
+      border-right: 2px solid $accent-color;
+    }
+
+    [type="checkbox"].filled-in:checked + label:after {
+      background-color: $accent-color;
+      border: 2px solid $accent-color;
+    }
+
+    #nprogress .bar {
+      background:  $accent-color;
+    }
+  }
+}

data/installer/core/app/assets/stylesheets/admin/utils/_base.scss

@@ -0,0 +1,66 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+  height: 100% !important;
+}
+
+html {
+  font-size: 10px;
+}
+
+body {
+  font-family: $font-primary;
+  font-size: 1.5rem;
+}
+a{
+  color: inherit;
+  &:hover{
+    color: inherit;
+  }
+}
+
+a {
+  color: inherit;
+  &:hover {
+    color: inherit;
+  }
+}
+
+.container {
+  width: 100%;
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.text-overflow {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
+.box-tools {
+  i {
+    padding: 0 5px;
+    font-size: 1.7rem;
+    color: #d2d2d2;
+    transition: all ease .3s;
+    cursor: pointer;
+    &:hover {
+      color: #555;
+      transition: all ease .3s;
+    }
+  }
+}
+ol.breadcrumb{
+  @media screen and (min-width: 0) and (max-width: 991px) {
+    display: none;
+  }
+  
+}