n20-common-lib 1.3.13 → 1.3.16

package/style/css/normalize.scss

@@ -1,726 +0,0 @@
-$--font-size-base: 14px !default;
-$--border-color-base: #dcdfe6 !default;
-$--border-radius-base: 4px !default;
-$--input-width: 224px !default;
-
-// 项目中可以直接使用
-// .input-w {width: $--input-width;}
-// .button-4em{min-width: 72px;}
-/* 格式化样式
----------------- */
-html {
-  height: 100%;
-}
-body {
-  height: 100%;
-  font-size: $--font-size-base;
-}
-li {
-  list-style: none;
-}
-a {
-  color: inherit;
-  text-decoration: none;
-}
-iframe {
-  border: 0;
-  outline: none;
-}
-
-/* 滚动条样式
---------------- */
-::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-::-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: 3px;
-}
-
-::-webkit-scrollbar-thumb {
-  min-height: 28px;
-  background-color: rgba(0, 0, 0, 0.07);
-  border-width: 0;
-  border-radius: 3px;
-}
-
-::-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 - 116px);
-}
-
-/* 内外边距
---------------- */
-@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%;
-  }
-}
-
-/* 文字居中
---------------- */
-.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 {
-  &-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: 38px;
-  margin-bottom: -12px;
-  &::before {
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    top: 0px;
-    height: 100%;
-    left: -12px;
-    right: -12px;
-    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
-  }
-}
-
-.page-button-shadow {
-  position: relative;
-  height: 44px;
-  margin-bottom: -12px;
-  &::before {
-    content: '';
-    pointer-events: none;
-    position: absolute;
-    top: 0px;
-    height: 100%;
-    left: -12px;
-    right: -12px;
-    box-shadow: 0px -2px 6px 0px rgba($--color-black, 0.08);
-  }
-}
-
-/* 边框
--------------- */
-.bd {
-  &-none {
-    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);
-}
-.font-size-small {
-  font-size: var(--font-size-small);
-}
-
-/* 通用颜色
--------------- */
-.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-primary);
-  }
-}
-
-/* 字号
---------------- */
-.f-s {
-  &-s {
-    /* 12号字 */
-    font-size: var(--font-size-small);
-  }
-  &-b {
-    /* 14号字 */
-    font-size: var(--font-size-base);
-  }
-  &-m {
-    /*  16号字 */
-    font-size: var(--font-size-medium);
-  }
-  &-l {
-    /* 18号 */
-    font-size: var(--font-size-large);
-  }
-  &-xl {
-    font-size: var(--font-size-extra-large);
-  }
-}
-
-/* 宽高范围是 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;
-  }
-}
-
-.n20-page-content {
-  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);
-  }
-}