keppler 2.0.2 → 2.0.3

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

@@ -5,14 +5,20 @@
   width: 100% !important;
 }
 
-.upload-image {
-  max-width: 400px;
+.upload_image {
+  max-width: 325px;
+  min-height: 300px;
   margin: 0 auto;
   .files {
     position: relative;
-    #icon-file{
+    background-image: url(/assets/admin/image_default.png);
+    background-size: 50px;
+    background-repeat: no-repeat;
+    background-position: center 80px;
+    .icon-file {
       position: absolute;
       left: 50%;
+      transform: translateX(-50%);
       top: 35%;
       font-size: 4rem;
       opacity: .7;
@@ -23,14 +29,15 @@
       outline-offset: -10px;
       -webkit-transition: outline-offset .15s ease-in-out, background-color .15s linear;
       transition: outline-offset .15s ease-in-out, background-color .15s linear;
-      padding: 160px 25px 70px;
       text-align: center !important;
-      margin: 0;
+      padding: 160px 25px 70px;
       width: 100% !important;
+      margin: 0;
       &:before {
         position: absolute;
         bottom: 5px;
-        left: 0;  pointer-events: none;
+        left: 0;
+        pointer-events: none;
         width: 100%;
         right: 0;
         height: 57px;
@@ -49,7 +56,8 @@
         top: 200px;
         width: 100%;
         left: 50%;
-        transform: translateX(-30%);
+        transform: translateX(-50%);
+        text-align: center;
       }
     }
     &-icon {
@@ -71,13 +79,22 @@
   }
 
   .image_to_upload {
+    max-height: 300px;
+    max-width: 325px;
     width: 100%;
   }
 
   .files-absolute {
     position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 325px;
     opacity: 0;
-    // width: 90%;
-    transition: .3s;
+    transition: opacity .3s;
+    &:hover {
+      opacity: .5;
+      transition: opacity .3s;
+    }
   }
 }

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

@@ -1,3 +1,9 @@
+.keppler-custom-field {
+  i {
+    margin-right: 5px;
+  }
+}
+
 .form-group {
   .control-label {
     abbr {
@@ -53,7 +59,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background: #353535;
+  background: #5a5a5a;
   -webkit-transform: scaleX(0);
   transform: scaleX(0);
   -webkit-transform-origin: 0 50%;
@@ -75,6 +81,9 @@
 
 .form-padding {
   padding: 2rem;
+  @include respond-to(xs){
+    padding: 2rem 0;
+  }
 }
 
 .btn-primary {
@@ -87,8 +96,12 @@
 
   &:hover,
   &:focus,
-  &:active {
-    background-color: $keppler-accent;
+  &:active,
+  &:active:focus,
+  &[disabled]:hover {
+    background-color: $keppler-color;
+    filter: brightness(120%);
+    outline: none;
   }
 }
 
@@ -121,7 +134,7 @@
       & + .cr > .cr-icon {
         transform: scale(3) rotateZ(-20deg);
         opacity: 0;
-        color: #eee;
+        color: #fff;
         transition: all .3s ease-in;
       }
       &:checked + .cr {
@@ -131,7 +144,7 @@
         .cr-icon  {
           transform: scale(1) rotateZ(0deg);
           opacity: 1;
-          color: #eee;
+          color: #fff;
           transition: all .3s ease-in;
         }
       }
@@ -156,7 +169,7 @@
         top: 0;
         left: 1px;
         padding: 0px;
-        color: #eee;
+        color: #fff;
       }
     }
   }

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

@@ -96,7 +96,7 @@
 }
 #preview{
   position: absolute;
-  background: #333;
+  background: #5a5a5a;
   padding: 3px;
   visibility: none;
   color: #fff;
@@ -313,17 +313,13 @@
         cursor: pointer;
       }
     }
-    &:last-child{
-      border: none;
-    }
+    // &:last-child{
+    //   border: none;
+    // }
 
   }
 }
 
-.ui-sortable-helper{
-  display: table;
-  background-color: #fdfdfd;
-}
 #tools{
   padding: {
     top: 5px;

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

@@ -27,3 +27,8 @@
 .ui-sortable-handle{
   width: 50px;
 }
+.ui-sortable-helper{
+  // width: 50px;
+  display: table;
+  background-color: #fdfdfd;
+}

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

@@ -7,19 +7,26 @@ header.main-header{
       }
     }
   }
-  .nav-profile-img{
+  .nav-profile-img {
     @extend %circle-img;
     width: 90px;
     height: 90px;
     margin: 0 auto;
+    object-fit: cover;
+    background: $keppler-color;
   }
-  .small-profile-img{
+  .small-profile-img {
     @extend %circle-img;
     float: left;
     width: 25px;
     height: 25px;
     margin-right: 10px;
     margin-top: -2px;
+    object-fit: cover;
+    background-color: $keppler-color;
+    @include respond-to(xs){
+      margin-right: 0;
+    }
   }
 }
 

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

@@ -0,0 +1,6 @@
+.table-data{
+  padding: 5px 8px !important;
+  .switch-div{
+    margin-top: 7px;
+  }
+}

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

@@ -1,8 +1,9 @@
 #search {
   margin: 8px 0;
   float: left;
-  width: 0;
-  animation: .5s ease-out 1s grow_width_40 forwards;
+  width: 50%;
+  max-width: 0;
+  // animation: .5s ease-out 1s grow_width forwards;
   transition: .3s ease-in-out;
   @include respond-to(xs) {
     animation: none;
@@ -12,9 +13,9 @@
   }
   .input-group {
     .search-bar {
-      border-color: #d2d6de;
+      border: solid .5px #d2d6de;
       padding: 0;
-      animation: .5s cubic-bezier(0.4, 0, 0.2, 1) 1s change_input forwards;
+      // animation: .5s cubic-bezier(0.4, 0, 0.2, 1) 1s change_input forwards;
       transition: .3s ease-in-out;
       &:focus {
         border-color: $keppler-color;
@@ -30,7 +31,8 @@
     .input-group-btn {
       .search-button {
         background-color: transparent;
-        animation: .3s ease-in-out .5s change_button forwards;
+        // animation: .3s ease-in-out .5s change_button forwards;
+        border: 50%;
         transition: .3s ease-in-out;
         &:active {
           box-shadow: none;
@@ -45,8 +47,8 @@
           animation: none;
         }
         .search-icon {
-          color: $keppler-color;
-          animation: .3s ease-in-out .5s change_color forwards;
+          color: #999;
+          // animation: .3s ease-in-out .5s change_color forwards;
           transition: .3s ease-in-out;
           @include respond-to(xs) {
             animation: none;
@@ -65,7 +67,7 @@
   height: 34px;
   width: 34px;
   padding: 5px;
-  margin: 8px;
+  margin: 10px;
   color: #999;
   opacity: 0;
   border-radius: 50%;
@@ -89,13 +91,16 @@
   transition: .3s .5s ease-in-out;
 }
 
-.navbar-nav.translate {
-  transform: translateX(100%);
+.navbar-custom-menu{
   transition: .2s .5s ease-in-out;
+  &.translate {
+    transform: translateX(100%);
+    transition: .2s .5s ease-in-out;
+  }
 }
 
 #search.display-search {
-  animation: .5s ease-in-out .5s grow_width_70 forwards;
+  animation: .5s ease-in-out .5s grow_width forwards;
   .input-group {
     .search-bar {
       animation: .5s cubic-bezier(0.4, 0, 0.2, 1) .5s change_input forwards;
@@ -113,7 +118,7 @@
 
 #search.hidding-search {
   animation: .3s ease-out .5s width_down forwards;
-  width: 70%;
+  max-width: 500px;
   .input-group {
     .search-bar {
       animation: .5s cubic-bezier(0.4, 0, 0.2, 1) .5s hide_input forwards;
@@ -139,21 +144,12 @@
   }
 }
 
-@keyframes grow_width_40 {
-  from {
-    width: 0;
-  }
-  to {
-    width: 40%;
-  }
-}
-
-@keyframes grow_width_70 {
+@keyframes grow_width {
   from {
-    width: 0;
+    max-width: 0;
   }
   to {
-    width: 70%;
+    max-width: 500px;
   }
 }
 
@@ -172,7 +168,7 @@
 
 @keyframes change_color {
   from {
-    color: $keppler-color;
+    color: #999;
   }
   to {
     color: #fff;
@@ -190,10 +186,10 @@
 
 @keyframes width_down {
   from {
-    width: 70%;
+    max-width: 50%;
   }
   to {
-    width: 0;
+    max-width: 0;
   }
 }
 
@@ -215,6 +211,6 @@
     color: #fff;
   }
   to {
-    color: $keppler-color;
+    color: #999;
   }
 }

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

@@ -38,12 +38,12 @@ body{
     display: none
   }
   &.sidebar-collapse{
+    transition: .2s;
     .user-panel{
       padding: {
         left: 4px;
         right: 2px;
       }
-      transition: .2s;
       .side-img-profile{
         width: 40px;
         height: 40px;

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

@@ -1,47 +1,143 @@
-.switch > input[type="checkbox"] {
+label.keppler-switch {
+  margin-bottom: 0px !important;
+  position: relative;
+  display: block;
+  width: 40px;
+  height: 24px;
+  input {
+    display:none;
+
+    &.active + .slider {
+      background-color: $keppler-color;
+    }
+
+    &.active + .slider {
+      box-shadow: 0 0 1px $keppler-color;
+    }
+
+    &.active + .slider:before {
+      -webkit-transform: translateX(16px);
+      -ms-transform: translateX(16px);
+      transform: translateX(16px);
+    }
+  }
+
+  .slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+    &:before {
+      position: absolute;
+      content: "";
+      height: 16px;
+      width: 16px;
+      left: 4px;
+      bottom: 4px;
+      background-color: white;
+      -webkit-transition: .4s;
+      transition: .4s;
+    }
+  }
+
+  .slider.round {
+    border-radius: 34px;
+    &:before {
+      border-radius: 50%;
+    }
+  }
+
+  .inline-label {
+    margin-left: 50px;
+    opacity: .5;
+    transition: opacity .3s;
+    &.active {
+      opacity: 1;
+      transition: opacity .3s;
+    }
+  }
+
+  a {
+    text-decoration: none;
+  }
+}
+
+.no-visible {
   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;
+.row-selectable:hover {
+  background-color: #f3f0f0;
+  transition: all ease .3s;
+  cursor: pointer;
+}
+
+label {
+  margin-bottom: 0px !important;
+}
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 40px;
+  height: 24px;
+}
+
+.switch input {
+  display:none;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 16px;
+  width: 16px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input.active + .slider {
+  background-color: $keppler-color;
+}
+
+input.active + .slider {
+  box-shadow: 0 0 1px $keppler-color;
+}
+
+input.active + .slider:before {
+  -webkit-transform: translateX(16px);
+  -ms-transform: translateX(16px);
+  transform: translateX(16px);
+}
+
+.slider.round {
+  border-radius: 34px;
 }
 
-.switch > input[type="checkbox"]:checked + label::before {
-    background: inherit;
-    opacity: 0.5;
+.slider.round:before {
+  border-radius: 50%;
 }
 
-.switch > input[type="checkbox"]:checked + label::after {
-    background: $keppler-color;
-    left: 20px;
+a {
+  text-decoration: none;
 }