commitall

account/theme/pages/build/scss/pages/_404_500_errors.scss

@@ -0,0 +1,43 @@
+//
+// Pages: 400 and 500 error pages
+//
+
+.error-page {
+  margin: 20px auto 0;
+  width: 600px;
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+  }
+
+  //For the error number e.g: 404
+  > .headline {
+    float: left;
+    font-size: 100px;
+    font-weight: 300;
+
+    @include media-breakpoint-down(sm) {
+      float: none;
+      text-align: center;
+    }
+  }
+
+  //For the message
+  > .error-content {
+    display: block;
+    margin-left: 190px;
+
+    @include media-breakpoint-down(sm) {
+      margin-left: 0;
+    }
+
+    > h3 {
+      font-size: 25px;
+      font-weight: 300;
+
+      @include media-breakpoint-down(sm) {
+        text-align: center;
+      }
+    }
+  }
+}

account/theme/pages/build/scss/pages/_e-commerce.scss

@@ -0,0 +1,45 @@
+//
+// Pages: E-commerce
+//
+
+// product image
+.product-image {
+  @include img-fluid ();
+  width: 100%;
+}
+
+// product image thumbnails list
+.product-image-thumbs {
+  align-items: stretch;
+  display: flex;
+  margin-top: 2rem;
+}
+
+// product image thumbnail
+.product-image-thumb {
+  @include box-shadow($thumbnail-box-shadow);
+  @include border-radius($thumbnail-border-radius);
+
+  background-color: $thumbnail-bg;
+  border: $thumbnail-border-width solid $thumbnail-border-color;
+  display: flex;
+  margin-right: 1rem;
+  max-width: 6.5rem + ($thumbnail-padding * 2);
+  padding: $thumbnail-padding * 2;
+
+  img {
+    @include img-fluid ();
+    align-self: center;
+  }
+
+  &:hover {
+    opacity: .5;
+  }
+}
+
+// product share
+.product-share {
+  a {
+    margin-right: .5rem;
+  }
+}

account/theme/pages/build/scss/pages/_iframe.scss

@@ -0,0 +1,142 @@
+body.iframe-mode {
+  .main-sidebar {
+    display: none;
+  }
+  .content-wrapper {
+    margin-left: 0 !important;
+    margin-top: 0 !important;
+    padding-bottom: 0 !important;
+  }
+  .main-header,
+  .main-footer {
+    display: none;
+  }
+}
+
+body.iframe-mode-fullscreen {
+  overflow: hidden;
+
+  &.layout-navbar-fixed .wrapper .content-wrapper {
+    margin-top: 0 !important;
+  }
+}
+
+.content-wrapper {
+  height: 100%;
+
+  &.iframe-mode {
+    .btn-iframe-close {
+      color: $danger;
+      position: absolute;
+      line-height: 1;
+      right: .125rem;
+      top: .125rem;
+      z-index: 10;
+      visibility: hidden;
+
+      &:hover,
+      &:focus {
+        animation-name: fadeIn;
+        animation-duration: $transition-speed;
+        animation-fill-mode: both;
+        visibility: visible;
+      }
+
+      @include on-touch-device() {
+        visibility: visible;
+      }
+    }
+    .navbar-nav {
+      overflow-y: auto;
+      width: 100%;
+
+      .nav-link {
+        white-space: nowrap;
+      }
+      .nav-item {
+        position: relative;
+
+        &:hover,
+        &:focus {
+          .btn-iframe-close {
+            animation-name: fadeIn;
+            animation-duration: $transition-speed;
+            animation-fill-mode: both;
+            visibility: visible;
+
+            @include on-touch-device() {
+              visibility: visible;
+            }
+          }
+        }
+      }
+    }
+    .tab-content {
+      position: relative;
+    }
+    .tab-pane + .tab-empty {
+      display: none;
+    }
+    .tab-empty {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+    .tab-loading {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      display: none;
+      background-color: $main-bg;
+
+      > div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    iframe {
+      border: 0;
+      width: 100%;
+      height: 100%;
+      margin-bottom: -8px;
+
+      .content-wrapper {
+        padding-bottom: 0 !important;
+      }
+    }
+
+    body.iframe-mode-fullscreen & {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      margin-left: 0 !important;
+      height: 100%;
+      min-height: 100%;
+      z-index: $zindex-main-sidebar + 10;
+    }
+  }
+}
+
+.permanent-btn-iframe-close {
+  .btn-iframe-close {
+    animation: none !important;
+    visibility: visible !important;
+    opacity: 1;
+  }
+}
+
+@include dark-mode () {
+  .content-wrapper.iframe-mode {
+    .tab-loading {
+      background-color: $dark;
+    }
+  }
+}

account/theme/pages/build/scss/pages/_invoice.scss

@@ -0,0 +1,19 @@
+//
+// Pages: Invoice
+//
+
+.invoice {
+  background-color: $white;
+  border: 1px solid $card-border-color;
+  position: relative;
+}
+
+.invoice-title {
+  margin-top: 0;
+}
+
+@include dark-mode () {
+  .invoice {
+    background-color: $dark;
+  }
+}

account/theme/pages/build/scss/pages/_kanban.scss

@@ -0,0 +1,60 @@
+.content-wrapper.kanban {
+  height: 1px;
+
+  .content {
+    height: 100%;
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    .container,
+    .container-fluid {
+      width: max-content;
+      display: flex;
+      align-items: stretch;
+    }
+  }
+  .content-header + .content {
+    height: calc(100% - ((2 * 15px) + (1.8rem * #{$headings-line-height})));
+  }
+
+  .card {
+    .card-body {
+      padding: .5rem;
+    }
+
+    &.card-row {
+      width: 340px;
+      display: inline-block;
+      margin: 0 .5rem;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      .card-body {
+        height: calc(100% - (12px + (1.8rem * #{$headings-line-height}) + .5rem));
+        overflow-y: auto;
+      }
+
+      .card {
+        &:last-child {
+          margin-bottom: 0;
+          border-bottom-width: 1px;
+        }
+        .card-header {
+          padding: .5rem .75rem;
+        }
+        .card-body {
+          padding: .75rem;
+        }
+      }
+    }
+  }
+  .btn-tool {
+    &.btn-link {
+      text-decoration: underline;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
+}

account/theme/pages/build/scss/pages/_lockscreen.scss

@@ -0,0 +1,93 @@
+//
+// Pages: Lock Screen
+//
+
+// ADD THIS CLASS TO THE <BODY> TAG
+.lockscreen {
+  background-color: $gray-200;
+
+  // User name [optional]
+  .lockscreen-name {
+    font-weight: 600;
+    text-align: center;
+  }
+}
+
+.lockscreen-logo {
+  font-size: 35px;
+  font-weight: 300;
+  margin-bottom: 25px;
+  text-align: center;
+
+  a {
+    color: $gray-700;
+  }
+}
+
+.lockscreen-wrapper {
+  margin: 0 auto;
+  margin-top: 10%;
+  max-width: 400px;
+}
+
+
+// Will contain the image and the sign in form
+.lockscreen-item {
+  @include border-radius(4px);
+  background-color: $white;
+  margin: 10px auto 30px;
+  padding: 0;
+  position: relative;
+  width: 290px;
+}
+
+// User image
+.lockscreen-image {
+  @include border-radius(50%);
+  background-color: $white;
+  left: -10px;
+  padding: 5px;
+  position: absolute;
+  top: -25px;
+  z-index: 10;
+
+  > img {
+    @include border-radius(50%);
+    height: 70px;
+    width: 70px;
+  }
+}
+
+// Contains the password input and the login button
+.lockscreen-credentials {
+  margin-left: 70px;
+
+  .form-control {
+    border: 0;
+  }
+
+  .btn {
+    background-color: $white;
+    border: 0;
+    padding: 0 10px;
+  }
+}
+
+.lockscreen-footer {
+  margin-top: 10px;
+}
+
+@include dark-mode () {
+  .lockscreen-item {
+    background-color: $dark;
+  }
+  .lockscreen-logo a {
+    color: $white;
+  }
+  .lockscreen-credentials .btn {
+    background-color: $dark;
+  }
+  .lockscreen-image {
+    background-color: $gray-600;
+  }
+}

account/theme/pages/build/scss/pages/_login_and_register.scss

@@ -0,0 +1,118 @@
+//
+// Pages: Login & Register
+//
+
+.login-logo,
+.register-logo {
+  font-size: 2.1rem;
+  font-weight: 300;
+  margin-bottom: .9rem;
+  text-align: center;
+
+  a {
+    color: $gray-700;
+  }
+}
+
+.login-page,
+.register-page {
+  align-items: center;
+  background-color: $gray-200;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  justify-content: center;
+}
+
+.login-box,
+.register-box {
+  width: 360px;
+
+  @media (max-width: map-get($grid-breakpoints, sm)) {
+    margin-top: .5rem;
+    width: 90%;
+  }
+
+  .card {
+    margin-bottom: 0;
+  }
+}
+
+.login-card-body,
+.register-card-body {
+  background-color: $white;
+  border-top: 0;
+  color: #666;
+  padding: 20px;
+
+  .input-group {
+    .form-control {
+      border-right: 0;
+
+      &:focus {
+        box-shadow: none;
+
+        ~ .input-group-prepend .input-group-text,
+        ~ .input-group-append .input-group-text {
+          border-color: $input-focus-border-color;
+        }
+      }
+
+      &.is-valid {
+        &:focus {
+          box-shadow: none;
+        }
+
+        ~ .input-group-prepend .input-group-text,
+        ~ .input-group-append .input-group-text {
+          border-color: $success;
+        }
+      }
+
+      &.is-invalid {
+        &:focus {
+          box-shadow: none;
+        }
+
+        ~ .input-group-append .input-group-text {
+          border-color: $danger;
+        }
+      }
+    }
+
+    .input-group-text {
+      background-color: transparent;
+      border-bottom-right-radius: $border-radius;
+      border-left: 0;
+      border-top-right-radius: $border-radius;
+      color: #777;
+      transition: $input-transition;
+    }
+  }
+}
+
+.login-box-msg,
+.register-box-msg {
+  margin: 0;
+  padding: 0 20px 20px;
+  text-align: center;
+}
+
+.social-auth-links {
+  margin: 10px 0;
+}
+
+@include dark-mode () {
+  .login-card-body,
+  .register-card-body {
+    background-color: $dark;
+    border-color: $gray-600;
+    color: $white;
+  }
+  .login-logo,
+  .register-logo {
+    a {
+      color: $white;
+    }
+  }
+}

account/theme/pages/build/scss/pages/_mailbox.scss

@@ -0,0 +1,99 @@
+//
+// Pages: Mailbox
+//
+
+.mailbox-messages {
+  > .table {
+    margin: 0;
+  }
+}
+
+.mailbox-controls {
+  padding: 5px;
+
+  &.with-border {
+    border-bottom: 1px solid $card-border-color;
+  }
+}
+
+.mailbox-read-info {
+  border-bottom: 1px solid $card-border-color;
+  padding: 10px;
+
+  h3 {
+    font-size: 20px;
+    margin: 0;
+  }
+
+  h5 {
+    margin: 0;
+    padding: 5px 0 0;
+  }
+}
+
+.mailbox-read-time {
+  color: #999;
+  font-size: 13px;
+}
+
+.mailbox-read-message {
+  padding: 10px;
+}
+
+.mailbox-attachments {
+  @include list-unstyled ();
+  li {
+    border: 1px solid #eee;
+    float: left;
+    margin-bottom: 10px;
+    margin-right: 10px;
+    width: 200px;
+  }
+}
+
+.mailbox-attachment-name {
+  color: #666;
+  font-weight: 700;
+}
+
+.mailbox-attachment-icon,
+.mailbox-attachment-info,
+.mailbox-attachment-size {
+  display: block;
+}
+
+.mailbox-attachment-info {
+  background-color: $gray-100;
+  padding: 10px;
+}
+
+.mailbox-attachment-size {
+  color: #999;
+  font-size: 12px;
+
+  > span {
+    display: inline-block;
+    padding-top: .75rem;
+  }
+}
+
+.mailbox-attachment-icon {
+  color: #666;
+  font-size: 65px;
+  max-height: 132.5px;
+  padding: 20px 10px;
+  text-align: center;
+
+  &.has-img {
+    padding: 0;
+
+    > img {
+      height: auto;
+      max-width: 100%;
+    }
+  }
+}
+
+.mailbox-attachment-close {
+  @extend .close;
+}

account/theme/pages/build/scss/pages/_profile.scss

@@ -0,0 +1,44 @@
+//
+// Pages: Profile
+//
+
+.profile-user-img {
+  border: 3px solid $gray-500;
+  margin: 0 auto;
+  padding: 3px;
+  width: 100px;
+}
+
+.profile-username {
+  font-size: 21px;
+  margin-top: 5px;
+}
+
+.post {
+  border-bottom: 1px solid $gray-500;
+  color: #666;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+
+  &:last-of-type {
+    border-bottom: 0;
+    margin-bottom: 0;
+    padding-bottom: 0;
+  }
+
+  .user-block {
+    margin-bottom: 15px;
+    width: 100%;
+  }
+
+  .row {
+    width: 100%;
+  }
+}
+
+@include dark-mode () {
+  .post {
+    color: $white;
+    border-color: $gray-600;
+  }
+}

account/theme/pages/build/scss/pages/_projects.scss

@@ -0,0 +1,26 @@
+//
+// Pages: Projects
+//
+
+.projects {
+  td {
+    vertical-align: middle;
+  }
+
+  .list-inline {
+    margin-bottom: 0;
+  }
+
+  // table avatar
+  img.table-avatar,
+  .table-avatar img {
+    border-radius: 50%;
+    display: inline;
+    width: 2.5rem;
+  }
+
+  // project state
+  .project-state {
+    text-align: center;
+  }
+}