front-end almost done | started back-end

assets/admin/sass/admin.scss

@@ -0,0 +1,455 @@
+@font-face {
+  font-family: 'dubaiB';
+  src: url("~assets/admin/fonts/dubai-font-webfonts/bold/Dubai-Bold.eot"),
+  url("~assets/admin/fonts/dubai-font-webfonts/bold/Dubai-Bold.ttf"),
+  url("~assets/admin/fonts/dubai-font-webfonts/bold/Dubai-Bold.woff");
+}
+
+@font-face {
+  font-family: 'dubaiL';
+  src: url("~assets/admin/fonts/dubai-font-webfonts/light/Dubai-Light.eot"),
+  url("~assets/admin/fonts/dubai-font-webfonts/light/Dubai-Light.ttf"),
+  url("~assets/admin/fonts/dubai-font-webfonts/light/Dubai-Light.woff");
+}
+
+@font-face {
+  font-family: 'dubaiM';
+  src: url("~assets/admin/fonts/dubai-font-webfonts/medium/Dubai-Medium.eot"),
+  url("~assets/admin/fonts/dubai-font-webfonts/medium/Dubai-Medium.ttf"),
+  url("~assets/admin/fonts/dubai-font-webfonts/medium/Dubai-Medium.woff");
+}
+
+@font-face {
+  font-family: 'dubaiR';
+  src: url("~assets/admin/fonts/dubai-font-webfonts/regular/Dubai-Regular.eot"),
+  url("~assets/admin/fonts/dubai-font-webfonts/regular/Dubai-Regular.ttf"),
+  url("~assets/admin/fonts/dubai-font-webfonts/regular/Dubai-Regular.woff");
+}
+
+/////////////////////////////////////// mixins
+@mixin boxSizing($p) {
+  box-sizing: $p;
+  -webkit-box-sizing: $p;
+  -moz-box-sizing: $p;
+}
+
+@mixin borderRadius($p) {
+  border-radius: $p;
+  -webkit-border-radius: $p;
+  -moz-border-radius: $p;
+}
+
+@mixin boxShadow($p) {
+  box-shadow: $p;
+  -webkit-box-shadow: $p;
+  -moz-box-shadow: $p;
+}
+
+@mixin transform($p) {
+  transform: $p;
+  -webkit-transform: $p;
+  -moz-transform: $p;
+  -ms-transform: $p;
+  -o-transform: $p;
+}
+
+@mixin transition($p) {
+  transition: $p;
+  -webkit-transition: $p;
+  -moz-transition: $p;
+  -ms-transition: $p;
+  -o-transition: $p;
+}
+
+%appearance {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: transparent;
+  border: none;
+}
+
+%transition {
+  transition: 0.3s;
+  -webkit-transition: 0.3s;
+  -moz-transition: 0.3s;
+  -ms-transition: 0.3s;
+  -o-transition: 0.3s;
+}
+
+////////////////////////////////////// variables
+$header: rgba(#784FAE, 1);
+$sidebar: rgba(#424242e3, 1);
+$headerLogoTextColor: #fff;
+$headerFontColor: #fff;
+$asideTxt: #fff;
+$asideIcon: #fff;
+$bg: rgba(lightgray, 0.1);
+$borders: rgba(#000, 0.1);
+$menuGroup: #4f4f4f;
+$usernameColor: #fff;
+$titleBg: rgba(#424242e3, 1);
+$titleColor: #fff;
+$panelBg: #fff;
+////////////////////////////////////// globals
+
+
+////////////////////////////////////// layouts
+.admin {
+  direction: rtl;
+  font-family: 'dubaiR', sans-serif;
+  height: 100vh;
+  overflow: hidden;
+
+  h1, h2, h3, h4, h5, h6, a, p, span, b {
+    font-family: 'dubaiR', sans-serif;
+  }
+
+  * {
+    @include boxSizing(border-box);
+  }
+
+  .admin--content {
+    height: calc(100vh - 55px);
+    flex-basis: calc(100% - 300px);
+    background: $bg;
+    direction: rtl !important;
+    text-align: right;
+    overflow-y: auto;
+
+    .title {
+      //width: 100%;
+      height: 55px;
+      background: $titleBg;
+      color: $titleColor;
+      padding: 0 15px;
+
+      h2 {
+        margin-left: auto;
+        font-size: 25px !important;
+      }
+
+      button {
+        margin-right: 10px;
+      }
+
+      a {
+        color: inherit;
+      }
+    }
+
+    .panel {
+      background: $panelBg;
+      @include borderRadius(5px);
+      @include boxShadow(0 2px 4px rgba(#000, 0.4));
+      padding: 50px 20px;
+      text-align: right;
+      direction: rtl;
+    }
+
+    table {
+      tr {
+        direction: rtl;
+        text-align: right;
+
+        td {
+          direction: rtl;
+          text-align: right;
+        }
+
+        th {
+          direction: rtl;
+          text-align: right;
+        }
+      }
+    }
+  }
+
+  .admin--sidebar {
+    min-height: calc(100vh - 55px);
+    background: $sidebar;
+    flex-basis: 300px;
+    border-left: 1px solid $borders;
+
+    ul {
+      width: 100%;
+
+      li {
+        width: 100%;
+        border-bottom: 1px solid $borders;
+        cursor: pointer;
+        position: relative;
+
+        a {
+          display: inline-block;
+          padding: 20px;
+          color: $asideTxt;
+
+          i {
+            color: $asideIcon;
+            margin-left: 10px;
+          }
+
+          .badge {
+            display: inline-block;
+            width: 23px;
+            height: 23px;
+            padding: 5px;
+            background: red;
+            color: #fff;
+            font-size: 14px;
+            text-align: center;
+            @include borderRadius(5px);
+            position: absolute;
+            top: 50%;
+            left: 10px;
+            @include transform(translateY(-50%));
+          }
+        }
+
+        .menu-group {
+          background: $menuGroup;
+        }
+      }
+    }
+
+    .user {
+      padding: 20px 15px;
+      color: $usernameColor;
+
+      h2 {
+        font-size: 25px !important;
+        margin-right: 10px;
+      }
+    }
+
+    .language {
+      width: 100%;
+
+      select {
+        width: 100%;
+        border: 1px solid $borders;
+        background: $sidebar;
+        color: #fff;
+        cursor: pointer;
+        padding-right: 15px;
+
+        option {
+          background: $bg;
+        }
+      }
+    }
+  }
+
+  .admin--header {
+    background: $header;
+    border-bottom: 1px solid $borders;
+    color: $headerFontColor;
+
+    .headerSubDIV {
+      height: 55px;
+      display: flex;
+      align-items: center;
+
+      &.left {
+        justify-content: flex-end;
+
+        .logout {
+          @extend %appearance;
+          @extend %transition;
+          cursor: pointer;
+          font-size: 20px;
+          color: inherit;
+
+          &:hover {
+            color: red;
+          }
+        }
+      }
+
+      &.right {
+        justify-content: flex-start;
+
+        .customer {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          color: inherit;
+
+          .logo {
+            display: inline-block;
+            width: auto;
+            margin: 0 15px 0 0;
+
+            img {
+              height: 40px;
+            }
+          }
+
+          .name {
+            display: inline-block;
+            margin-right: 10px;
+            font-size: 20px !important;
+            font-weight: bold;
+
+            p {
+              color: $headerLogoTextColor;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .admin--home {
+    text-align: center;
+  }
+
+}
+
+pre {
+  width: 100%;
+  background: #000;
+  color: green;
+  direction: ltr !important;
+  text-align: left !important;
+  padding: 20px;
+}
+
+
+//////////////////////////////////////////////////////////////////////////////////////////////////////// element ui rtl fix
+html:lang(fa) {
+  .el-tag {
+    /*margin-bottom: 10px!important;*/
+  }
+
+  .text-area {
+    textarea {
+      height: 100px;
+    }
+  }
+
+  .el-popup-parent--hidden {
+    padding-right: 0 !important;
+  }
+
+  .el-tag .el-icon-close {
+    right: auto !important;
+    left: -5px !important;
+  }
+
+  .el-table .el-table__body-wrapper .el-table__row .is-left {
+    text-align: left !important;
+  }
+
+  .wrapper {
+    min-height: 100vh;
+  }
+
+  .el-form-item__label {
+    float: right !important;
+    text-align: right !important;
+  }
+
+  .el-form-item__content {
+    margin-left: 0 !important;
+    margin-right: 120px !important;
+  }
+
+
+  @media (max-width: 768px) {
+    .el-form-item__content {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+  }
+
+
+  .secondTitle {
+    margin-top: 50px;
+  }
+
+  .err {
+    color: red;
+    font-size: 13px;
+  }
+
+  .el-upload__input {
+    display: none !important;
+  }
+
+  .el-message-box__title, .el-message-box__message {
+    direction: rtl !important;
+    text-align: right !important;
+  }
+
+  .el-message-box__message {
+    padding-left: 12px !important;
+    padding-right: 36px !important;
+  }
+
+  .el-message-box__btns {
+    text-align: left !important;
+  }
+
+  .el-message-box__headerbtn {
+    right: auto !important;
+    left: 15px !important;
+  }
+
+  .el-message-box__btns button:nth-child(2) {
+    margin-left: 0 !important;
+    margin-right: 10px !important;
+  }
+
+  .el-message-box__status {
+    right: 0 !important;
+  }
+
+  .el-table td, .el-table th {
+    text-align: right !important;
+  }
+
+  .el-upload__input {
+    display: none !important;
+  }
+
+  .el-checkbox__label {
+    padding-left: 0 !important;
+    padding-right: 10px !important;
+  }
+
+  .el-message__icon {
+    margin-right: 0 !important;
+    margin-left: 10px !important;
+  }
+
+  .sidebar-subnav {
+    background: rgba(0, 0, 0, 0.05) !important;
+  }
+
+  .sidebar > .nav > li {
+    border-bottom: 1px solid #eee !important;
+  }
+
+  .brand-logo p {
+    margin-top: 6px !important;
+  }
+
+  .brand-logo-collapsed svg {
+    fill: #fff !important;
+  }
+
+  .nav-floating {
+    background: #fff !important;
+  }
+
+  .el-dialog__headerbtn {
+    right: auto !important;
+    left: 20px !important;
+  }
+
+  .el-radio__label {
+    padding-right: 10px !important;
+  }
+}