afn-basic-components 1.1.2 → 1.1.3

package/src/styles/ruoyi.scss

@@ -1,337 +1,287 @@
-html {
-  height: 100%;
-  box-sizing: border-box;
+/**
+* 通用css样式布局处理
+* Copyright (c) 2019 ruoyi
+*/
+
+/** 基础通用 **/
+.pt5 {
+  padding-top: 5px;
 }
 
-body {
-  height: 100%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
-    Microsoft YaHei, Arial, sans-serif;
+.pr5 {
+  padding-right: 5px;
 }
 
-label {
-  font-weight: 700;
+.pb5 {
+  padding-bottom: 5px;
 }
 
-html,
-body,
-#app {
-  height: 100%;
-  overflow: hidden;
+.mt5 {
+  margin-top: 5px;
 }
 
-*,
-*:before,
-*:after {
-  box-sizing: inherit;
+.mr5 {
+  margin-right: 5px;
 }
 
-a:focus,
-a:active {
-  outline: none;
+.mb5 {
+  margin-bottom: 5px;
 }
 
-a,
-a:focus,
-a:hover {
-  cursor: pointer;
-  color: inherit;
-  text-decoration: none;
+.mb8 {
+  margin-bottom: 8px;
 }
 
-div:focus {
-  outline: none;
+.ml5 {
+  margin-left: 5px;
 }
 
-.clearfix {
-  &:after {
-    visibility: hidden;
-    display: block;
-    font-size: 0;
-    content: " ";
-    clear: both;
-    height: 0;
-  }
+.mt10 {
+  margin-top: 10px;
 }
 
-// main-container global css
-.app-container {
-  padding: 20px;
+.mr10 {
+  margin-right: 10px;
 }
 
-.components-container {
-  margin: 30px 50px;
-  position: relative;
+.mb10 {
+  margin-bottom: 10px;
+}
+.ml10 {
+	margin-left: 10px;
 }
 
-.pagination-container {
-  margin-top: 30px;
+.mt20 {
+  margin-top: 20px;
 }
 
-.text-center {
-  text-align: center;
+.mr20 {
+  margin-right: 20px;
 }
 
-.sub-navbar {
-  height: 50px;
-  line-height: 50px;
-  position: relative;
-  width: 100%;
-  text-align: right;
-  padding-right: 20px;
-  transition: 600ms ease position;
-  background: linear-gradient(
-    90deg,
-    rgba(32, 182, 249, 1) 0%,
-    rgba(32, 182, 249, 1) 0%,
-    rgba(33, 120, 241, 1) 100%,
-    rgba(33, 120, 241, 1) 100%
-  );
-
-  &.draft {
-    background: #d0d0d0;
+.mb20 {
+  margin-bottom: 20px;
+}
+.ml20 {
+	margin-left: 20px;
+}
+
+.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+  font-family: inherit;
+  font-weight: 500;
+  line-height: 1.1;
+  color: inherit;
+}
+
+.el-message-box__status + .el-message-box__message{
+  word-break: break-word;
+}
+
+.el-dialog:not(.is-fullscreen) {
+  margin-top: 6vh !important;
+}
+
+.el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
+  overflow: auto;
+  overflow-x: hidden;
+  max-height: 70vh;
+  padding: 10px 20px 0;
+}
+
+.el-table {
+  .el-table__header-wrapper, .el-table__fixed-header-wrapper {
+    th {
+      word-break: break-word;
+      background-color: #f8f8f9;
+      color: #515a6e;
+      height: 40px;
+      font-size: 13px;
+    }
   }
 
-  &.deleted {
-    background: #d0d0d0;
+  .el-table__body-wrapper {
+    .el-button [class*="el-icon-"] + span {
+      margin-left: 1px;
+    }
   }
 }
 
-.link-type,
-.link-type:focus {
-  color: #337ab7;
-  cursor: pointer;
+/** 表单布局 **/
+.form-header {
+  font-size: 15px;
+  color: #6379bb;
+  border-bottom: 1px solid #ddd;
+  margin: 8px 10px 25px 10px;
+  padding-bottom: 5px
+}
 
-  &:hover {
-    color: #20a0ff;
-  }
+/** 表格布局 **/
+.pagination-container {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
 }
 
-.filter-container {
-  padding-bottom: 10px;
+/* tree border */
+.tree-border {
+  margin-top: 5px;
+  border: 1px solid #e5e6e7;
+  background: #FFFFFF none;
+  border-radius: 4px;
+}
 
-  .filter-item {
-    display: inline-block;
-    vertical-align: middle;
-    margin-bottom: 10px;
+@media (max-width: 768px) {
+  .pagination-container .el-pagination > .el-pagination__jump {
+    display: none !important;
+  }
+  .pagination-container .el-pagination > .el-pagination__sizes {
+    display: none !important;
   }
 }
 
-//refine vue-multiselect plugin
-.multiselect {
-  line-height: 16px;
-}
-
-.multiselect--active {
-  z-index: 1000 !important;
-}
-
-// 通用间距类
-.mt-5 { margin-top: 5px; }
-.mt-10 { margin-top: 10px; }
-.mt-15 { margin-top: 15px; }
-.mt-20 { margin-top: 20px; }
-.mb-5 { margin-bottom: 5px; }
-.mb-10 { margin-bottom: 10px; }
-.mb-15 { margin-bottom: 15px; }
-.mb-20 { margin-bottom: 20px; }
-.ml-5 { margin-left: 5px; }
-.ml-10 { margin-left: 10px; }
-.ml-15 { margin-left: 15px; }
-.ml-20 { margin-left: 20px; }
-.mr-5 { margin-right: 5px; }
-.mr-10 { margin-right: 10px; }
-.mr-15 { margin-right: 15px; }
-.mr-20 { margin-right: 20px; }
-
-.pt-5 { padding-top: 5px; }
-.pt-10 { padding-top: 10px; }
-.pt-15 { padding-top: 15px; }
-.pt-20 { padding-top: 20px; }
-.pb-5 { padding-bottom: 5px; }
-.pb-10 { padding-bottom: 10px; }
-.pb-15 { padding-bottom: 15px; }
-.pb-20 { padding-bottom: 20px; }
-.pl-5 { padding-left: 5px; }
-.pl-10 { padding-left: 10px; }
-.pl-15 { padding-left: 15px; }
-.pl-20 { padding-left: 20px; }
-.pr-5 { padding-right: 5px; }
-.pr-10 { padding-right: 10px; }
-.pr-15 { padding-right: 15px; }
-.pr-20 { padding-right: 20px; }
-
-// 通用元素样式
-h1, h2, h3, h4, h5, h6 {
-  margin: 0;
-  padding: 0;
-  font-weight: 500;
+.el-table .fixed-width .el-button--mini {
+  padding-left: 0;
+  padding-right: 0;
+  width: inherit;
 }
 
-table {
-  border-collapse: collapse;
-  width: 100%;
+/** 表格更多操作下拉样式 */
+.el-table .el-dropdown-link,.el-table .el-dropdown-selfdefine {
+	cursor: pointer;
+	margin-left: 5px;
 }
 
-.el-dialog {
-  border-radius: 8px;
+.el-table .el-dropdown, .el-icon-arrow-down {
+  font-size: 12px;
 }
 
-// 表单布局样式
-.form-container {
-  padding: 20px;
-  background: #fff;
-  border-radius: 4px;
+.el-tree-node__content > .el-checkbox {
+  margin-right: 8px;
 }
 
-.form-item {
-  margin-bottom: 20px;
+.list-group-striped > .list-group-item {
+  border-left: 0;
+  border-right: 0;
+  border-radius: 0;
+  padding-left: 0;
+  padding-right: 0;
+}
 
-  .label {
-    display: block;
-    margin-bottom: 8px;
-    font-weight: 500;
-    color: #333;
-  }
+.list-group {
+  padding-left: 0px;
+  list-style: none;
 }
 
-// 表格布局样式
-.table-container {
-  background: #fff;
-  border-radius: 4px;
-  padding: 20px;
+.list-group-item {
+  border-bottom: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
+  margin-bottom: -1px;
+  padding: 11px 0px;
+  font-size: 13px;
 }
 
-.table-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
+.pull-right {
+  float: right !important;
 }
 
-.table-title {
-  font-size: 16px;
-  font-weight: 500;
-  color: #333;
+.el-card__header {
+  padding: 14px 15px 7px;
+  min-height: 40px;
 }
 
-// 响应式布局
-@media (max-width: 768px) {
-  .app-container {
-    padding: 10px;
-  }
+.el-card__body {
+  padding: 15px 20px 20px 20px;
+}
 
-  .components-container {
-    margin: 15px 20px;
-  }
+.card-box {
+  margin-bottom: 10px;
+}
 
-  .filter-container {
-    .filter-item {
-      display: block;
-      width: 100%;
-    }
-  }
+/* button color */
+.el-button--cyan.is-active,
+.el-button--cyan:active {
+  background: #20B2AA;
+  border-color: #20B2AA;
+  color: #FFFFFF;
 }
 
-// 表格样式
-.el-table {
-  th {
-    background-color: #f5f7fa;
-    color: #333;
-    font-weight: 500;
-  }
+.el-button--cyan:focus,
+.el-button--cyan:hover {
+  background: #48D1CC;
+  border-color: #48D1CC;
+  color: #FFFFFF;
 }
 
-// 分页样式
-.pagination-container {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 20px;
+.el-button--cyan {
+  background-color: #20B2AA;
+  border-color: #20B2AA;
+  color: #FFFFFF;
 }
 
-// 树形组件样式
-.tree-container {
-  max-height: 400px;
-  overflow-y: auto;
+/* text color */
+.text-navy {
+  color: #1ab394;
 }
 
-// 列表组样式
-.list-group {
-  .list-group-item {
-    padding: 12px 16px;
-    border-bottom: 1px solid #eee;
+.text-primary {
+  color: inherit;
+}
 
-    &:last-child {
-      border-bottom: none;
-    }
-  }
+.text-success {
+  color: #1c84c6;
 }
 
-// 卡片样式
-.card {
-  background: #fff;
-  border-radius: 4px;
-  padding: 20px;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+.text-info {
+  color: #23c6c8;
 }
 
-// 青色按钮样式
-.el-button--cyan {
-  background-color: #20a0ff;
-  border-color: #20a0ff;
-  color: #fff;
-
-  &:hover,
-  &:focus {
-    background: #4db3ff;
-    border-color: #4db3ff;
-    color: #fff;
-  }
+.text-warning {
+  color: #f8ac59;
 }
 
-// 文本颜色类
-.text-primary { color: #409eff; }
-.text-success { color: #67c23a; }
-.text-warning { color: #e6a23c; }
-.text-danger { color: #f56c6c; }
-.text-info { color: #909399; }
+.text-danger {
+  color: #ed5565;
+}
+
+.text-muted {
+  color: #888888;
+}
 
-// 图片样式
+/* image */
 .img-circle {
   border-radius: 50%;
 }
 
-.img-thumbnail {
-  padding: 4px;
-  line-height: 1.42857143;
-  background-color: #fff;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+.img-lg {
+  width: 120px;
+  height: 120px;
+}
+
+.avatar-upload-preview {
+  position: relative;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 200px;
+  height: 200px;
+  border-radius: 50%;
+  box-shadow: 0 0 4px #ccc;
+  overflow: hidden;
 }
 
-// 拖拽列样式
+/* 拖拽列样式 */
 .sortable-ghost {
-  opacity: 0.8;
+  opacity: .8;
   color: #fff !important;
   background: #42b983 !important;
 }
 
-// 分割面板样式
-.split-pane {
-  height: 100%;
+.top-right-btn {
+  position: relative;
+  float: right;
 }
 
-// 响应式分页
-@media (max-width: 768px) {
-  .pagination-container {
-    .el-pagination {
-      .el-pagination__sizes,
-      .el-pagination__jump {
-        display: none;
-      }
-    }
-  }
+/* 分割面板样式 */
+.splitpanes.default-theme .splitpanes__pane {
+  background-color: #fff!important;
 }