ns-base-module 1.0.0

package/style/basics.scss

@@ -0,0 +1,671 @@
+@import "./variables.scss";
+
+//投影类型
+.lc_Shadow_right {
+  @extend .lc_Shadow_float_R;
+}
+
+.lc_Shadow_left {
+  @extend .lc_Shadow_float_L;
+}
+
+.lc_Shadow_down {
+  @extend .lc_Shadow_float_D;
+}
+
+.lc_Shadow_down_new {
+  box-shadow: 0px 1px 8px 0px rgba(51, 65, 80, 16%);
+}
+
+//===================================
+// 以下是准备废弃的编码，过渡期间使用
+//===================================
+
+//品牌色 外边框阴影
+$lc_Color_brand_opacity20: rgba(52, 91, 244, 0.2);
+
+//品牌色 新增(2022/8/30)
+$lc_Color_brand_hover: #466bf5;
+
+//品牌色 新增(2022/8/30)
+$lc_Color_brand_click: #2c52dc;
+
+//品牌色，主要组件正常背景（Normal）
+$lc_Color_brand_1: $lc_Color_brand_normal;
+
+// 品牌色20%透明度
+$lc_Color_brand_1_opacity20: $lc_Color_brand_normal_opacity20;
+
+//辅助色，脚手架正常背景（Normal）
+$lc_Color_brand_2: $lc_Color_background_d1;
+
+//辅助色，脚手架按下背景（Pessed）
+// $lc_Color_brand_3: #23283C; 废弃
+
+//辅助色，主要组件按下背景（Pessed)
+// $lc_Color_brand_4: #34384B;
+$lc_Color_brand_4: $lc_Color_brand_click;
+
+//辅助色，主要组件鼠标经过背景（Hover)
+$lc_Color_brand_5: $lc_Color_brand_hover;
+
+//辅助色，主要组件禁用背景（Disabled)
+$lc_Color_brand_6: $lc_Color_brand_disable;
+
+//辅助色，弹层鼠标经过背景
+$lc_Color_brand_7: $lc_Color_brand_lb;
+
+//辅助色，页面默认背景（Default）
+$lc_Color_brand_8: $lc_Color_background_d5;
+
+//辅助色，线性颜色
+$lc_Color_brand_9: $lc_Color_neutral_6;
+
+//辅助色，大部分icon颜色
+$lc_Color_brand_10: $lc_Color_neutral_2;
+
+//辅助色，表单title背景
+$lc_Color_brand_12: $lc_Color_neutral_7;
+
+//出错（Error）
+$lc_Color_function_1: $lc_Color_error_normal;
+
+//警告（Warming）
+$lc_Color_function_2: $lc_Color_warning_normal;
+
+//链接（Link）
+$lc_Color_function_3: $lc_Color_info_normal;
+
+//成功（Success）
+$lc_Color_function_4: $lc_Color_success_normal;
+
+$lc_Color_error_opacity20: $lc_Color_error_normal_opacity20;
+
+//===================================
+// OVER
+//===================================
+
+//页面标题
+@mixin lc_Font_heading($lineHeight: 30px, $fontWeight: 500) {
+  font-weight: $fontWeight;
+  font-size: 16px;
+  line-height: 16px;
+}
+
+//大标题
+@mixin lc_Font_title($lineHeight: 24px, $fontWeight: 500) {
+  font-weight: $fontWeight;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+//小标题
+@mixin lc_Font_subhead($lineHeight: 22px, $fontWeight: 500) {
+  font-weight: $fontWeight;
+  font-size: 14px;
+  line-height: $lineHeight;
+}
+
+//正文
+@mixin lc_Font_base($lineHeight: 22px, $fontWeight: 400) {
+  font-weight: $fontWeight;
+  font-size: 14px;
+  line-height: $lineHeight;
+}
+
+//说明文字
+@mixin lc_Font_caption($lineHeight: 18px, $fontWeight: 400) {
+  font-weight: $fontWeight;
+  font-size: 12px;
+  line-height: $lineHeight;
+}
+
+//圆角/Radius
+.lc_Radius_sm {
+  border-radius: 2 * $lc_Hd;
+}
+
+.lc_Radius_xs {
+  border-radius: $lc_Hd;
+}
+
+//隔线/Line
+.lc_Line {
+  display: block;
+  width: 1px;
+  height: 7 * $lc_Hd;
+  background: $lc_Color_brand_9;
+}
+
+//隔线/Line-伪类版本
+@mixin lc_Line_w($type, $dx: 0) {
+  .base {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 1px;
+    content: "";
+    height: 6 * $lc_Hd;
+    box-sizing: border-box;
+    border-left: 1px solid $lc_Color_neutral_6;
+    transform: translateX($dx * $lc_Hd);
+  }
+  // & when ($type=before) {
+  //     &::before {
+  //       .base;
+  //     }
+  //   }
+
+  //   & when ($type=after) {
+  //     &::after {
+  //       .base;
+  //     }
+  //   }
+}
+
+$ns_widget: __ns_widget;
+
+.ant-layout-content {
+  background-color: $lc_Color_brand_8;
+
+  > div:nth-child(2) {
+    background: none !important;
+  }
+}
+
+// #Container {
+html {
+  --antd-wave-shadow-color: $lc_Color_brand_5;
+
+  body {
+    $font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
+      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    color: $lc_Color_neutral_1;
+  }
+}
+
+.tableTdIdheight0 {
+  height: 0 !important;
+  min-height: 0 !important;
+  z-index: -10;
+}
+
+.ant-col {
+  min-height: 0;
+}
+
+.ant-typography {
+  color: $lc_Color_neutral_2;
+}
+
+.ant-empty-image {
+  height: auto;
+}
+
+//解决 日期时间组件 ：after » 伪类 出现乱码问题
+
+// 》
+.ns-pretwoionc {
+  position: relative;
+  top: -1px;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  vertical-align: middle;
+  border: 0 solid #aaa;
+  border-width: 1.5px 0 0 1.5px;
+  border-radius: 1px;
+  transform: rotate(-45deg) scale(0.8);
+  transition: all 0.3s;
+  content: "";
+}
+
+.ant-input:focus,
+.ant-input:hover {
+  border-color: $lc_Color_brand_1;
+}
+
+.ant-input:focus {
+  box-shadow: 0 0 0 2px rgba(24, 97, 242, 0.2);
+}
+
+.ant-dropdown-menu-item:hover,
+.ant-dropdown-menu-submenu-title:hover {
+  background-color: $lc_Color_brand_lb;
+}
+
+.ant-calendar-header .ant-calendar-prev-century-btn::before,
+.ant-calendar-header .ant-calendar-prev-decade-btn::before,
+.ant-calendar-header .ant-calendar-prev-year-btn::before,
+.ant-calendar-header .ant-calendar-prev-century-btn::after,
+.ant-calendar-header .ant-calendar-prev-decade-btn::after,
+.ant-calendar-header .ant-calendar-prev-year-btn::after {
+  @extend.ns-pretwoionc;
+}
+
+.ant-calendar-header .ant-calendar-next-century-btn::before,
+.ant-calendar-header .ant-calendar-next-decade-btn::before,
+.ant-calendar-header .ant-calendar-next-year-btn::before,
+.ant-calendar-header .ant-calendar-next-century-btn::after,
+.ant-calendar-header .ant-calendar-next-decade-btn::after,
+.ant-calendar-header .ant-calendar-next-year-btn::after {
+  @extend .ns-pretwoionc;
+}
+
+.ant-calendar-header .ant-calendar-prev-month-btn::after,
+.ant-calendar-header .ant-calendar-next-month-btn::after {
+  @extend .ns-pretwoionc;
+}
+
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-century-btn::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-century-btn::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-decade-btn::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-decade-btn::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-year-btn::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-year-btn::after {
+  @extend .ns-pretwoionc;
+}
+
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-century-btn::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-century-btn::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-decade-btn::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-decade-btn::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-year-btn::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-year-btn::after {
+  @extend .ns-pretwoionc;
+}
+
+.ant-calendar-header .ant-calendar-next-century-btn::before,
+.ant-calendar-header .ant-calendar-next-decade-btn::before,
+.ant-calendar-header .ant-calendar-next-year-btn::before,
+.ant-calendar-header .ant-calendar-next-century-btn::after,
+.ant-calendar-header .ant-calendar-next-decade-btn::after,
+.ant-calendar-header .ant-calendar-next-year-btn::after,
+.ant-calendar-header .ant-calendar-next-month-btn::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-century-btn::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-century-btn::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-decade-btn::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-decade-btn::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-year-btn::before,
+.ant-calendar-month-panel-header .ant-calendar-month-panel-next-year-btn:after {
+  transform: rotate(135deg) scale(0.8);
+}
+
+:hover .ant-calendar-header .ant-calendar-prev-century-btn:hover::before,
+.ant-calendar-header .ant-calendar-prev-decade-btn:hover::before,
+.ant-calendar-header .ant-calendar-prev-year-btn:hover::before,
+.ant-calendar-header .ant-calendar-prev-century-btn:hover::after,
+.ant-calendar-header .ant-calendar-prev-decade-btn:hover::after,
+.ant-calendar-header .ant-calendar-prev-year-btn:hover::after {
+  border-color: $lc_Color_brand_normal;
+}
+
+.ant-calendar-header .ant-calendar-next-century-btn:hover::before,
+.ant-calendar-header .ant-calendar-next-decade-btn:hover::before,
+.ant-calendar-header .ant-calendar-next-year-btn:hover::before,
+.ant-calendar-header .ant-calendar-next-century-btn:hover::after,
+.ant-calendar-header .ant-calendar-next-decade-btn:hover::after,
+.ant-calendar-header .ant-calendar-next-year-btn:hover::after {
+  border-color: $lc_Color_brand_normal;
+}
+
+.ant-calendar-header .ant-calendar-prev-month-btn:hover::after,
+.ant-calendar-header .ant-calendar-next-month-btn:hover::after {
+  border-color: $lc_Color_brand_normal;
+}
+
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-century-btn:hover::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-century-btn:hover::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-decade-btn:hover::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-decade-btn:hover::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-year-btn:hover::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-prev-year-btn:hover::after {
+  border-color: $lc_Color_brand_normal;
+}
+
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-century-btn:hover::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-century-btn:hover::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-decade-btn:hover::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-decade-btn:hover::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-year-btn:hover::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-year-btn:hover::after {
+  border-color: $lc_Color_brand_normal;
+}
+
+.ant-calendar-header .ant-calendar-next-century-btn:hover::before,
+.ant-calendar-header .ant-calendar-next-decade-btn:hover::before,
+.ant-calendar-header .ant-calendar-next-year-btn:hover::before,
+.ant-calendar-header .ant-calendar-next-century-btn:hover::after,
+.ant-calendar-header .ant-calendar-next-decade-btn:hover::after,
+.ant-calendar-header .ant-calendar-next-year-btn:hover::after,
+.ant-calendar-header .ant-calendar-next-month-btn:hover::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-century-btn:hover::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-century-btn:hover::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-decade-btn:hover::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-decade-btn:hover::after,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-year-btn:hover::before,
+.ant-calendar-month-panel-header
+  .ant-calendar-month-panel-next-year-btn:hover:after {
+  border-color: $lc_Color_brand_normal;
+}
+
+a {
+  color: $lc_Color_brand_normal;
+
+  &:hover {
+    color: $lc_Color_brand_normal;
+  }
+}
+
+.ant-spin-dot-item {
+  background-color: $lc_Color_brand_normal;
+}
+
+.ant-tabs-nav .ant-tabs-tab-active,
+.ant-tabs-nav .ant-tabs-tab:hover {
+  color: $lc_Color_brand_normal;
+}
+
+.ant-tabs-ink-bar {
+  background-color: $lc_Color_brand_normal;
+}
+
+.ant-btn {
+  @extend .lc_Radius_default;
+  @extend .ant-btn-sm;
+  &:hover,
+  &:focus {
+    color: $lc_Color_brand_normal;
+    border-color: $lc_Color_brand_normal;
+  }
+}
+
+.ant-btn-primary,
+.ant-calendar .ant-calendar-ok-btn {
+  background-color: $lc_Color_brand_normal !important;
+  border-color: $lc_Color_brand_normal;
+  color: #fff;
+
+  &:hover,
+  &:focus {
+    background-color: $lc_Color_brand_hover;
+    border-color: $lc_Color_brand_hover;
+    color: #fff;
+  }
+}
+
+.ant-btn-primary.ant-btn-background-ghost {
+  // color: $lc_Color_brand_normal;
+  color: #fff;
+  border-color: $lc_Color_brand_normal;
+
+  &:hover,
+  &:focus {
+    color: #fff;
+    border-color: $lc_Color_brand_normal;
+  }
+}
+
+.ant-btn-danger {
+  &:hover,
+  &:focus {
+    color: #fff;
+    border-color: $lc_Color_error_normal;
+  }
+}
+
+.ant-btn-link {
+  color: $lc_Color_brand_normal;
+
+  &:hover,
+  &:focus {
+    color: $lc_Color_brand_normal;
+    border-color: transparent;
+  }
+}
+
+.ant-switch:focus {
+  box-shadow: $lc_Color_brand_1_opacity20;
+}
+
+.ant-switch-checked {
+  background-color: $lc_Color_brand_normal;
+}
+
+.ant-checkbox-input:focus + .ant-checkbox-inner,
+.ant-checkbox-wrapper:hover .ant-checkbox-inner,
+.ant-checkbox:hover .ant-checkbox-inner {
+  border-color: $lc_Color_brand_normal;
+}
+
+.ant-select-selection__clear {
+  font-size: 14px;
+  width: 14px;
+  height: 14px;
+  margin-top: -7px;
+}
+
+.ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
+  background-color: $lc_Color_brand_normal;
+  border-color: $lc_Color_brand_normal;
+}
+
+.ant-steps-item[role="button"]:not(.ant-steps-item-process):hover
+  .ant-steps-item-icon
+  .ant-steps-icon {
+  color: $lc_Color_brand_normal;
+}
+
+.ant-radio-input:focus + .ant-radio-inner,
+.ant-radio-wrapper:hover .ant-radio,
+.ant-radio:hover .ant-radio-inner,
+.ant-radio-checked .ant-radio-inner {
+  border-color: $lc_Color_brand_normal;
+}
+
+.ant-radio-inner:after {
+  background-color: $lc_Color_brand_normal;
+}
+
+.ant-checkbox-checked .ant-checkbox-inner {
+  border-color: $lc_Color_brand_normal;
+  background-color: $lc_Color_brand_normal;
+}
+
+.ant-pagination-next:focus .ant-pagination-item-link,
+.ant-pagination-next:hover .ant-pagination-item-link,
+.ant-pagination-prev:focus .ant-pagination-item-link,
+.ant-pagination-prev:hover .ant-pagination-item-link,
+.ant-pagination-item:hover a {
+  color: $lc_Color_brand_5;
+}
+
+.ant-calendar-today .ant-calendar-date {
+  color: $lc_Color_brand_normal;
+  border-color: $lc_Color_brand_normal;
+}
+
+.ant-calendar-selected-day .ant-calendar-date {
+  // background-color: $lc_Color_brand_1_opacity20;
+}
+
+.ant-calendar-selected-date .ant-calendar-date:hover,
+.ant-calendar-selected-end-date .ant-calendar-date:hover,
+.ant-calendar-selected-start-date .ant-calendar-date:hover {
+  background-color: $lc_Color_brand_normal;
+}
+
+.ant-calendar-selected-date .ant-calendar-date,
+.ant-calendar-selected-end-date .ant-calendar-date,
+.ant-calendar-selected-start-date .ant-calendar-date {
+  background-color: $lc_Color_brand_normal;
+  color: #fff;
+}
+
+.ant-calendar-date:active {
+  background-color: #e6f7ff;
+  color: rgba(0, 0, 0, 0.65);
+}
+
+.ant-calendar-disabled-cell.ant-calendar-today {
+  .ant-calendar-date:before {
+    border: 0 none;
+  }
+}
+
+// form 表单 样式覆盖
+#Container {
+  .ant-input-affix-wrapper,
+  .ant-select-selector,
+  .ant-card {
+    @extend .lc_Radius_default;
+  }
+}
+
+.ant-input,
+.ant-form-item-control-input,
+.ant-input-affix-wrapper,
+.ant-select-selector {
+  border-radius: $lc_Hd !important;
+}
+.ant-select-selection-item {
+  text-align: left;
+}
+.ant-select-single .ant-select-selector,
+.ant-input-affix-wrapper > input.ant-input,
+.ant-input,
+.ant-select-item.ant-select-item-option,
+.ant-pro-table-alert-info-option,
+.ant-pagination-total-text,
+.ant-space-item,
+.ant-select-selection-item,
+.ant-pagination-item {
+  font-size: 12px !important;
+}
+.ant-pro-table-alert-info-option > a {
+  color: $lc_Color_brand_normal;
+}
+.ant-pagination-item-active a {
+  color: $lc_Color_brand_normal !important;
+  border-color: $lc_Color_brand_normal !important;
+}
+
+.ant-pro-query-filter-collapse-button {
+  color: $lc_Color_brand_normal;
+}
+.ant-input {
+  padding: 6px 11px;
+}
+
+/* 表格 样式覆盖 */
+.ant-table-cell {
+  padding: $lc_Hd * 2;
+}
+
+/* 卡片样式覆盖 */
+.ant-card {
+  .ant-card-body {
+    padding: $lc_Hd * 6;
+  }
+  .ant-card-head {
+    min-height: 36px;
+  }
+}
+
+/* 面板字体 */
+.ant-card-head-title {
+  font-size: $font-size-sm;
+}
+.ant-form-item .ant-form-item-label > label {
+  font-size: $font-size-sm;
+}
+.ant-table-wrapper .ant-table.ant-table-small {
+  .ant-table-thead > tr > th {
+    padding: $lc_Hd * 2;
+  }
+  font-size: $font-size-sm;
+}
+.ant-pro-query-filter {
+  padding: $lc_Hd * 10 $lc_Hd * 5 0;
+}
+
+.ant-modal {
+  .ant-modal-title,
+  .ant-pro-table-list-toolbar-title {
+    font-size: $font-size-sm;
+  }
+}
+.ant-pro-table-list-toolbar-title,
+.ant-pro-form-group-title {
+  font-size: $font-size-sm;
+}
+.ant-pro-form-group-title {
+  margin-bottom: $lc_Hd * 2;
+}
+
+.ant-select-dropdown {
+  @extend .lc_Radius_default;
+}
+
+// 设置全局滚动条
+// :global {
+/*滚动条宽 长,滚动条整体部分，其中的属性有width,height,background,border等。*/
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+/*滚动条的滑轨背景颜色,可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/
+::-webkit-scrollbar-track {
+  background-color: rgba(0, 0, 0, 0.01);
+  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+}
+
+/* 滑块颜色 */
+::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.09);
+  border-radius: 3px;
+
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+}
+// }
+
+$lc_Color_brand_menu_scroll: #294ccc;