t20-common-lib 0.2.0 → 0.2.1

package/packages/theme-chalk/src/common/normalize.scss

@@ -0,0 +1,870 @@
+// 项目中可以直接使用
+// .input-w {width: $--input-width;}
+// .button-4em{min-width: 72px;}
+/* 格式化样式 */
+
+
+
+html {
+  height: 100%;
+}
+
+body {
+  height: 100%;
+  // font-size: $--font-size-base;
+  font-family: PingFang SC, Microsoft YaHei, SUN, Arial, sans-serif;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+iframe {
+  border: 0;
+  outline: none;
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-button {
+  width: 0;
+  height: 0;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+::-webkit-scrollbar-thumb,
+::-webkit-scrollbar-track {
+  border-color: transparent;
+  border-style: solid;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+  min-height: 28px;
+  background-color: rgba(0, 0, 0, 0.07);
+  border-width: 0;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+::-webkit-scrollbar-thumb:active {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
+::-webkit-scrollbar-track:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+// ::-webkit-scrollbar-track:active {
+//   background-color: rgba(0, 0, 0, 0.03);
+// }
+
+:root {
+  --client-height: calc(100vh - 110px);
+}
+
+/* 内外边距 */
+@mixin set-pm($m, $p) {
+  .p-a#{$m} {
+    padding: $p;
+  }
+
+  .p-t#{$m} {
+    padding-top: $p;
+  }
+
+  .p-b#{$m} {
+    padding-bottom: $p;
+  }
+
+  .p-l#{$m} {
+    padding-left: $p;
+  }
+
+  .p-r#{$m} {
+    padding-right: $p;
+  }
+
+  .m-a#{$m} {
+    margin: $p;
+  }
+
+  .m-t#{$m} {
+    margin-top: $p;
+  }
+
+  .m-b#{$m} {
+    margin-bottom: $p;
+  }
+
+  .m-l#{$m} {
+    margin-left: $p;
+  }
+
+  .m-r#{$m} {
+    margin-right: $p;
+  }
+}
+
+/* 内外边距 */
+.m-l-auto {
+  margin-left: auto !important;
+}
+
+.m-r-auto {
+  margin-right: auto !important;
+}
+
+.m-lr-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+@include set-pm('', 12px !important);
+@include set-pm('-xl', 32px !important);
+@include set-pm('-lg', 24px !important);
+@include set-pm('-m', 16px !important);
+@include set-pm('-s', 8px !important);
+@include set-pm('-b', 6px !important);
+@include set-pm('-ss', 4px !important);
+@include set-pm('-0', 0 !important);
+
+/* 内外边距 */
+@mixin pm-fn($n) {
+  .pa-#{$n} {
+    padding: #{$n}px;
+  }
+
+  .pt-#{$n} {
+    padding-top: #{$n}px;
+  }
+
+  .pl-#{$n} {
+    padding-left: #{$n}px;
+  }
+
+  .pr-#{$n} {
+    padding-right: #{$n}px;
+  }
+
+  .pb-#{$n} {
+    padding-bottom: #{$n}px;
+  }
+
+  .px-#{$n} {
+    padding-left: #{$n}px;
+    padding-right: #{$n}px;
+  }
+
+  .py-#{$n} {
+    padding-top: #{$n}px;
+    padding-bottom: #{$n}px;
+  }
+
+  .ma-#{$n} {
+    margin: #{$n}px;
+  }
+
+  .mt-#{$n} {
+    margin-top: #{$n}px;
+  }
+
+  .ml-#{$n} {
+    margin-left: #{$n}px;
+  }
+
+  .mr-#{$n} {
+    margin-right: #{$n}px;
+  }
+
+  .mb-#{$n} {
+    margin-bottom: #{$n}px;
+  }
+
+  .mx-#{$n} {
+    margin-left: #{$n}px;
+    margin-right: #{$n}px;
+  }
+
+  .py-#{$n} {
+    margin-top: #{$n}px;
+    margin-bottom: #{$n}px;
+  }
+}
+
+@include pm-fn(0);
+@include pm-fn(2);
+@include pm-fn(4);
+@include pm-fn(6);
+@include pm-fn(8);
+@include pm-fn(10);
+@include pm-fn(12);
+@include pm-fn(14);
+
+/* 浮动布局 */
+.left,
+.float-left {
+  float: left;
+}
+
+.right,
+.float-right {
+  float: right;
+}
+
+.overflow {
+  height: auto;
+  overflow: hidden;
+}
+
+.overflow-y {
+  overflow-y: auto;
+}
+
+.overflow-x {
+  overflow-x: auto;
+}
+
+// 清除浮动
+.overflow-clear {
+  &:after {
+    content: '';
+    display: block;
+    clear: both;
+  }
+}
+
+/* 清除左侧浮动，将元素放置在任何先前的左浮动元素的下方 */
+.clear-left {
+  clear: left;
+}
+
+/* 清除右侧浮动，将元素放置在任何先前的右浮动元素的下方 */
+.clear-right {
+  clear: right;
+}
+
+/* 行内块元素水平垂直对齐方式 */
+.b-center {
+  text-align: center;
+
+  &>* {
+    display: inline-block;
+    vertical-align: bottom;
+  }
+}
+
+.b-vertical {
+  font-size: 0;
+
+  &>* {
+    vertical-align: middle;
+    display: inline-block;
+    font-size: 14px;
+  }
+
+  &:before {
+    content: '';
+    vertical-align: middle;
+    display: inline-block;
+    width: 0;
+    height: 100%;
+  }
+}
+
+.block {
+  display: block;
+}
+
+.inline_block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+/* 文字居中 */
+.text {
+  &-c {
+    text-align: center !important;
+  }
+
+  &-l {
+    text-align: left !important;
+  }
+
+  &-r {
+    text-align: right !important;
+  }
+
+  &-lr {
+    text-align: justify;
+    text-justify: inter-word;
+  }
+
+  &-ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/* 弹性盒模型 */
+.flex-box {
+  display: flex;
+}
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-box>*,
+.flex-column>* {
+  flex: none;
+}
+
+
+
+.flex {
+  &-wrap {
+    flex-wrap: wrap;
+  }
+
+  &-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &-v {
+    align-items: center;
+  }
+
+  &-s {
+    align-items: flex-start;
+  }
+
+  &-e {
+    align-items: flex-end;
+  }
+
+  &-l {
+    justify-content: flex-start;
+  }
+
+  &-r {
+    justify-content: flex-end;
+  }
+
+  &-c {
+    justify-content: center;
+  }
+
+  &-lr {
+    justify-content: space-between;
+  }
+
+  &-sa {
+    justify-content: space-around;
+  }
+}
+
+.flex-item {
+  flex: auto;
+}
+
+@for $n from 0 to 10 {
+  .flex-#{$n} {
+    flex: $n $n auto;
+  }
+}
+
+
+
+
+
+
+
+/* 旋转图标90度
+-------------- */
+.rotate90 {
+  display: inline-block;
+  transform: rotate(90deg);
+  cursor: pointer;
+}
+
+/* 清除背景色
+-------------- */
+.bg {
+  &-none {
+    background: none !important;
+  }
+}
+
+/* 阴影 */
+.box-shadow {
+  box-shadow: 0px 4px 16px 0px rgba($--color-black, 0.1);
+}
+
+.box-shadow-mini {
+  box-shadow: 0px 2px 8px 0px rgba($--color-black, 0.08);
+}
+
+// 底部统计翻页
+.page-footer-shadow {
+  position: relative;
+  height: 28px;
+  margin-bottom: -6px;
+
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: -8px;
+    right: -8px;
+    box-shadow: 0 -2px 6px 0px rgba($--color-black, 0.08);
+  }
+}
+
+// 底部操作按钮
+.page-button-shadow {
+  position: relative;
+  height: 44px;
+  margin-bottom: -8px;
+
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    top: 0px;
+    height: 100%;
+    left: -8px;
+    right: -8px;
+    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
+  }
+}
+
+.fixed-button-shadow {
+  position: absolute;
+  bottom: 10px;
+  left: 0;
+  right: 0;
+  height: 44px;
+  margin: 0 12px;
+  z-index: 1;
+  background-color: $--color-white;
+
+  &::before {
+    content: '';
+    pointer-events: none;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0px;
+    height: 100%;
+    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
+  }
+}
+
+/* 边框
+-------------- */
+.bd {
+
+  &-none,
+  &-0 {
+    border: none !important;
+  }
+
+  &-a {
+    border: 1px solid $--border-color-base;
+  }
+
+  &-t {
+    border-top: 1px solid $--border-color-base;
+  }
+
+  &-l {
+    border-left: 1px solid $--border-color-base;
+  }
+
+  &-r {
+    border-right: 1px solid $--border-color-base;
+  }
+
+  &-b {
+    border-bottom: 1px solid $--border-color-base;
+  }
+}
+
+.bd-rs {
+  border-radius: $--border-radius-base;
+}
+
+/* 设置弹窗内容区内边距
+-------------- */
+.el-dialog__wrapper {
+  &.p-a-0 {
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+
+  &.p-t-0 {
+    .el-dialog__body {
+      padding-top: 0;
+    }
+  }
+
+  &.p-b-0 {
+    .el-dialog__body {
+      padding-bottom: 0;
+    }
+  }
+}
+
+/* 通用字号
+-------------- */
+.font-size-base {
+  font-size: var(--font-size-base) !important;
+}
+
+.font-size-small {
+  font-size: var(--font-size-small) !important;
+}
+
+/* 通用颜色
+-------------- */
+.color-primary {
+  color: var(--color-primary) !important;
+}
+
+.color-success {
+  color: var(--color-success);
+}
+
+.color-warning {
+  color: var(--color-warning);
+}
+
+.color-danger {
+  color: var(--color-danger);
+}
+
+.color-placeholder {
+  color: var(--color-text-placeholder);
+}
+
+.linear-grad {
+  background: var(--background-linear-gradient);
+}
+
+.color-white {
+  color: white;
+}
+
+.color-ccc {
+  color: #ccc;
+}
+
+.color-999 {
+  color: #999;
+}
+
+.color-666 {
+  color: #666;
+}
+
+.color-333 {
+  color: #333;
+}
+
+/* 鼠标默认样式 */
+.cursor-d {
+  cursor: default;
+}
+
+/* 鼠标小手 */
+.pointer {
+  cursor: pointer;
+}
+
+/* 鼠标禁止- */
+.cursor-not {
+  cursor: not-allowed;
+}
+
+/* 字重 */
+.font {
+  &-w600 {
+    font-weight: var(--font-weight-bold);
+  }
+}
+
+/* 字号 */
+.f-s {
+  &-s {
+    /* 12号字 */
+    font-size: var(--font-size-small) !important;
+  }
+
+  &-b {
+    /* 14号字 */
+    font-size: var(--font-size-base) !important;
+  }
+
+  &-m {
+    /*  16号字 */
+    font-size: var(--font-size-medium) !important;
+  }
+
+  &-l {
+    /* 18号 */
+    font-size: var(--font-size-large) !important;
+  }
+
+  &-xl {
+    font-size: var(--font-size-extra-large) !important;
+  }
+}
+
+.auto-width-input {
+  width: fit-content;
+}
+
+.width-auto {
+  width: auto !important;
+}
+
+/* 宽高范围是 60-1000- */
+$list: 45, 60, 80, 100, 110, 120, 130, 140, 150, 160, 170, 180, 190, 200, 210, 220, 230, 240, 250, 260, 270, 280, 290,
+  300, 400, 500, 600, 700, 800, 900, 1000;
+
+@each $n in $list {
+  .w-#{$n} {
+    width: #{$n}px !important;
+  }
+
+  .h-#{$n} {
+    height: #{$n}px !important;
+  }
+}
+
+/* 宽百分比 */
+@for $i from 1 through 10 {
+  .w-#{$i}0p {
+    width: #{$i + '0%'} !important;
+  }
+}
+
+/* height: 100%; 速龙浏览器下子元素无法继承父元素的高速度 */
+.n20-page-content {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+/* 边框圆角
+-------------- */
+.b {
+  &-r {
+    border-radius: 50%;
+  }
+
+  &-r-4 {
+    border-radius: 4px;
+  }
+
+  &-r-5 {
+    border-radius: 5px;
+  }
+
+  &-r-6 {
+    border-radius: 6px;
+  }
+
+  &-r-7 {
+    border-radius: 7px;
+  }
+
+  &-r-8 {
+    border-radius: 8px;
+  }
+
+  &-r-9 {
+    border-radius: 9px;
+  }
+
+  &-r-10 {
+    border-radius: 10px;
+  }
+}
+
+/* 垂直对齐 */
+.align {
+  &-baseline {
+    vertical-align: baseline; // 将一个元素的基线与其父元素的基线对齐。
+  }
+
+  &-top {
+    vertical-align: top; // 将一个元素的顶部和它的子代与整个行的顶部对齐。
+  }
+
+  &-middle {
+    vertical-align: middle; // 将元素的中间与基线加父元素的一半高度对齐。
+  }
+
+  &-bottom {
+    vertical-align: bottom; // 将一个元素的底部和它的子代与整个行的底部对齐。
+  }
+
+  &-text-top {
+    vertical-align: text-top; // 使元素的顶部与父元素的字体顶部对齐。
+  }
+
+  &-text-bottom {
+    vertical-align: text-bottom; // 使元素的底部与父元素的字体底部对齐。
+  }
+}
+
+/* 本文选择 */
+
+.select {
+  &-none {
+    user-select: none; // 防止选择元素及其子元素中的文本。
+  }
+
+  &-text {
+    user-select: text; // 允许选择元素及其子元素中的文本。
+  }
+
+  &-all {
+    user-select: all; // 在用户点击时自动选择元素中的所有文本。
+  }
+
+  &-auto {
+    user-select: auto; // 使用默认的浏览器行为来选择文本
+  }
+}
+
+/* 文本溢出显示省略号 */
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 本文转换 */
+/* 使用 uppercase 功能类对文本进行大写转换 */
+.uppercase {
+  text-transform: uppercase;
+}
+
+/* 使用 lowercase 功能类对文本进行小写转换 */
+.lowercase {
+  text-transform: lowercase;
+}
+
+/* 使用 capitalize 功能类对文本进行首字母大写转换 */
+.capitalize {
+  text-transform: capitalize;
+}
+
+/* 下划线 */
+.underline {
+  text-decoration: underline;
+}
+
+/*  删除线 */
+.line-through {
+  text-decoration: line-through;
+}
+
+/*  移除文本装饰 */
+.no-underline {
+  text-decoration: none;
+}
+
+/* 动画 */
+.animate {
+  &-none {
+    animation: none;
+  }
+
+  &-spin {
+    animation: spin 1s linear infinite;
+  }
+
+  &-ping {
+    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+  }
+
+  &-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  }
+
+  &-bounce {
+    animation: bounce 1s infinite;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ping {
+
+  75%,
+  100% {
+    transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes pulse {
+
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes bounce {
+
+  0%,
+  100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+
+  50% {
+    transform: translateY(0);
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}