keppler 2.1.17 → 2.1.18

data/testing-with-2.1.18/app/assets/stylesheets/admin/pages/_devise.scss

@@ -0,0 +1,189 @@
+$gradient1: rgba(51, 51, 102, 1);
+$gradient2: rgba(36, 45, 75, 1);
+$gradient3: rgba(30, 43, 64, 1);
+
+.devise-default-img {
+  background: url('profile-menu.jpg'), linear-gradient(to bottom, $gradient1 0%, $gradient2 51%, $gradient3 100%);
+  background-position: center;
+  background-size: cover;
+}
+
+.devise-new-img {
+  background-position: center;
+  background-size: cover;
+}
+
+.devise {
+  height: 100%;
+  position: absolute;
+  width: 100%;
+
+  .container {
+    animation: animationContainer 1.5s forwards;
+    background: $black;
+    height: 100%;
+    overflow: hidden;
+    position: absolute;
+  }
+
+  @keyframes animationContainer {
+    0% {
+      background: $black;
+    }
+
+    100% {
+      background: $dark-transparent;
+    }
+  }
+
+  .login-footer {
+    bottom: 3rem;
+    color: $dark-white;
+    position: relative;
+    text-align: center;
+
+    span {
+      font-weight: 900;
+    }
+  }
+
+  .login-container {
+    width: 100%;
+  }
+
+  .login-box {
+    height: 70%;
+  }
+
+  .login-box-body {
+    animation: animationBody 2.5s forwards;
+    border-radius: 15px;
+    padding-bottom: 3rem;
+    padding-top: 3rem;
+    position: relative;
+    top: 2rem;
+  }
+
+  @keyframes animationBody {
+    0% {
+      top: 2rem;
+    }
+
+    100% {
+      top: 0;
+    }
+  }
+
+
+  .login-logo {
+    animation: animationLogo 1.5s forwards;
+    opacity: 0;
+    position: relative;
+    top: 2rem;
+
+    a {
+      color: $dark-white;
+    }
+
+    span {
+      color: $keppler-color;
+    }
+  }
+
+  @keyframes animationLogo {
+    0% {
+      opacity: 0;
+      top: 2rem;
+    }
+
+    100% {
+      opacity: 1;
+      top: 0;
+    }
+  }
+
+  .login-bottom {
+    align-items: center;
+    display: flex;
+    height: 45px;
+    justify-content: space-between;
+  }
+
+  .recoverable {
+    font-size: 13px;
+    position: relative;
+  }
+
+  .devise-errors {
+    color: $error-color;
+  }
+
+  img {
+    margin-top: 15px;
+    max-width: 150px;
+    width: 70px;
+  }
+
+  &-horizontal {
+    display: flex;
+    height: 100%;
+    justify-content: center;
+  }
+
+  &-vertical {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &-box {
+    width: 100%;
+
+    h5 {
+      margin: 0;
+    }
+
+    p {
+      font-weight: 300;
+    }
+    //
+    // @media #{$small-and-down} {
+    //   width: 100%;
+    // }
+
+    &-header {
+      color: $white;
+      padding-left: 15px;
+      padding-top: 80px;
+    }
+
+    &-title {
+      font-family: 'Patua One', cursive;
+      font-size: 30px;
+      padding-bottom: 10px;
+    }
+
+    &-body {
+      margin-bottom: 0;
+      padding: 15px;
+    }
+
+    &-footer {
+      margin-bottom: 0;
+      padding: 0 15px 15px;
+    }
+  }
+}
+
+.input-icon {
+  display: block;
+  height: 34px;
+  line-height: 34px;
+  pointer-events: none;
+  position: absolute;
+  right: 0;
+  text-align: center;
+  top: 0;
+  width: 34px;
+  z-index: 2;
+}

data/testing-with-2.1.18/app/assets/stylesheets/admin/pages/_files.scss

@@ -0,0 +1,229 @@
+.file-uploader {
+  background: $white;
+  margin: 0 auto;
+  max-width: 500px;
+  min-height: 250px;
+
+  .file-container {
+    align-items: center;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: flex;
+    flex-flow: column;
+    height: 240px;
+    justify-content: center;
+    margin: 0 auto;
+    outline: 2px dashed tint($gray, 50%);
+    outline-offset: 0;
+    position: relative;
+    transition: outline-offset .15s ease;
+
+    &:hover {
+      outline: 2px dashed $gray;
+      outline-offset: -5px;
+      transition: outline-offset .15s ease;
+    }
+
+    .form-group {
+      align-items: center;
+      display: flex;
+      height: 100%;
+      justify-content: center;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+
+    .control-label {
+      position: absolute;
+      top: 20%;
+    }
+
+    input {
+      cursor: pointer;
+      height: 0;
+      opacity: 0;
+      padding: 120px 50px;
+      position: absolute;
+      width: 100%;
+    }
+
+    .file-icon {
+      font-size: 5rem;
+    }
+
+    .file-text {
+      font-size: 2rem;
+      text-align: center;
+    }
+
+    .file-image {
+      max-width: 100%;
+    }
+
+    .file-name {
+      font-size: 1.5rem;
+      left: 50%;
+      max-width: 80%;
+      position: absolute;
+      text-align: center;
+      top: 80%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+    }
+  }
+
+  button,
+  a,
+  [type=submit] {
+    background: $keppler-color;
+    border: 0;
+    border-radius: 20px;
+    color: $white;
+    display: table;
+    margin: 20px auto;
+    outline: none;
+    padding: 10px 20px;
+    transition: .3s;
+
+    &:hover {
+      filter: brightness(110%);
+      transition: .3s;
+    }
+  }
+}
+
+.already-uploaded {
+  .control-label,
+  .file-icon,
+  .file-text,
+  .file-name {
+    color: $white;
+    opacity: 0;
+    text-shadow: 0 0 5px $light-black;
+    transition: .3s;
+  }
+
+  &:hover {
+    .control-label,
+    .file-icon,
+    .file-text,
+    .file-name {
+      opacity: 1;
+      transition: .3s;
+    }
+  }
+}
+
+///////////////////// File Multiple /////////////////////
+
+.file-multiple {
+  align-items: center;
+  display: flex;
+  flex-flow: wrap;
+  max-width: 100%;
+  min-height: 100px;
+
+  .file-container {
+    height: 100px;
+    margin: 5px;
+    padding: 10px;
+    width: 100px;
+
+    input {
+      padding: 50px;
+    }
+
+    .file-icon {
+      font-size: 2rem;
+    }
+
+    .file-text {
+      font-size: 1rem;
+    }
+  }
+
+  .file-list {
+    align-items: center;
+    display: inline-flex;
+    flex-flow: wrap;
+    justify-content: center;
+    margin: 5px;
+    padding: 0;
+    width: 100%;
+  }
+
+  .file-item {
+    align-items: center;
+    background: $white;
+    box-shadow: $btn-float-shadow;
+    display: flex;
+    height: 100px;
+    justify-content: center;
+    list-style: none;
+    margin: 5px;
+    max-width: 100px;
+    padding: 5px;
+    position: relative;
+    transition: .12s ease-in-out;
+    width: 100px;
+  }
+
+  .file-item-background {
+    align-items: center;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    position: absolute;
+    transition: .2s ease-in-out;
+    width: 100%;
+
+    i {
+      font-size: 3rem;
+    }
+  }
+
+  .file-icon-delete {
+    font-size: 3rem;
+
+    &.item-opacity {
+      cursor: pointer;
+      font-size: 2rem;
+      opacity: 0;
+      position: absolute;
+      right: 5px;
+      top: 5px;
+      transition: .02s ease-in-out;
+    }
+  }
+
+  .file-item:hover {
+    box-shadow: $btn-float-shadow-hover;
+    transition: .12s ease-in-out;
+
+    .file-item-background {
+      filter: opacity(20%);
+      transition: .2s ease-in-out;
+    }
+
+    .file-icon-delete::before {
+      content: '\e082'; // icon-close
+      // content: '\e054'; // icon-trash
+    }
+
+    .file-icon-delete:hover {
+      color: $error-color;
+      transition: .02s ease-in-out;
+    }
+
+    .file-icon-delete.item-opacity {
+      opacity: 1;
+      transition: .02s ease-in-out;
+    }
+  }
+}

data/testing-with-2.1.18/app/assets/stylesheets/admin/pages/_form.scss

@@ -0,0 +1,190 @@
+.keppler-custom-field {
+  i {
+    margin-right: 5px;
+  }
+}
+
+.form-group {
+  .control-label {
+    abbr {
+      border-bottom: 0;
+      color: $keppler-color;
+      text-decoration: 0;
+    }
+  }
+
+  textarea {
+    min-height: 35px;
+    resize: vertical;
+  }
+}
+
+.social-medias-setting {
+  input:not([type='submit']) {
+    padding-left: 35px;
+  }
+
+  .social-icons {
+    left: 0;
+    margin: 35px 0 0 25px;
+    position: absolute;
+  }
+}
+
+.arrow-back {
+  margin-bottom: 1rem;
+
+  a {
+    background-color: transparent;
+    border-radius: 5%;
+    color: $black;
+    font-weight: 400;
+    transition: .3s;
+  }
+}
+
+.hvr-sweep-to-right {
+  box-shadow: 0 0 1px transparent;
+  display: inline-block;
+  position: relative;
+  transform: perspective(1px) translateZ(0);
+  transition-duration: .3s;
+  transition-property: color;
+  vertical-align: middle;
+}
+
+.hvr-sweep-to-right::before {
+  background: $dark-grey;
+  bottom: 0;
+  content: '';
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: scaleX(0);
+  transform-origin: 0 50%;
+  transition-duration: .3s;
+  transition-property: transform;
+  transition-timing-function: ease-out;
+  z-index: -1;
+}
+
+.hvr-sweep-to-right:hover,
+.hvr-sweep-to-right:focus,
+.hvr-sweep-to-right:active {
+  color: $white;
+}
+
+.hvr-sweep-to-right:hover::before,
+.hvr-sweep-to-right:focus::before,
+.hvr-sweep-to-right:active::before {
+  transform: scaleX(1);
+}
+
+.form-padding {
+  padding: 2rem 0;
+
+  @include respond-to(xs) {
+    padding: 2rem 0;
+  }
+}
+
+.btn-primary {
+  background-color: $keppler-color;
+  border: 0;
+  border-radius: 15px;
+  color: $dark-white;
+  font-weight: 400;
+  padding: 7px 21px;
+  transition: .4s;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &:active:focus,
+  &[disabled]:hover {
+    background-color: $keppler-color;
+    filter: brightness(120%);
+    outline: none;
+  }
+}
+
+.form-control:focus {
+  border-color: $keppler-color;
+  box-shadow: none;
+}
+
+.box-body-no-padding {
+  padding: 0;
+}
+
+.checkbox {
+  display: flex;
+  margin: 0;
+
+  label {
+    min-height: 0;
+    padding: 0;
+
+    .label-text {
+      margin: -3px 0 0 10px;
+    }
+
+    &::after {
+      clear: both;
+      content: '';
+      display: table;
+    }
+  }
+
+  .cr {
+    border: solid 1px $grey;
+    border-radius: 1px;
+    display: inline-block;
+    float: left;
+    height: 15px;
+    position: relative;
+    transition: .3s;
+    width: 15px;
+
+    .cr-icon {
+      color: $white;
+      font-size: 11px;
+      left: 1px;
+      padding: 0;
+      position: absolute;
+      top: 0;
+    }
+  }
+}
+
+[type="checkbox"] {
+  display: none;
+  transition: all .3s ease-in;
+
+  + .cr > .cr-icon {
+    color: $white;
+    opacity: 0;
+    transform: scale(3) rotateZ(-20deg);
+    transition: all .3s ease-in;
+  }
+
+  &:checked + .cr {
+    background: $keppler-color;
+    border: solid 1px $keppler-color;
+    transition: all .3s ease-in;
+
+    .cr-icon {
+      color: $white;
+      opacity: 1;
+      transform: scale(1) rotateZ(0deg);
+      transition: all .3s ease-in;
+    }
+  }
+
+  &:disabled + .cr {
+    cursor: not-allowed;
+    opacity: .5;
+    transition: all .3s ease-in;
+  }
+}