acud
Version:
acg react 组件库
545 lines (498 loc) • 17.4 kB
text/less
@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin';
@input-prefix-cls: ~'@{acud-prefix}-input';
@input-textarea-outer-prefix-cls: ~'@{acud-prefix}-input-textarea-outer';
@input-textarea-prefix-cls: ~'@{acud-prefix}-input-textarea';
@input-password-outer-prefix-cls: ~'@{acud-prefix}-input-password-outer';
@input-password-prefix-cls: ~'@{acud-prefix}-input-password';
@select-auto-complete-prefix-cls: ~'@{acud-prefix}-select-auto-complete';
@select-prefix-cls: ~'@{acud-prefix}-select';
// basic logic - line hight, font size
// content layer - 只处理文字 Icon， 没有开关config，对应四种交互状态配置
// background layer - 背景层 填色、描边、阴影，可以通过开关config配置， 对应四种交互状态
// 统一密码填充图形，chrome disc使用U+2022字符，IE&Firefox使用U+25CF字符
// 这两个字符差异较大，导致同一字体下disc大小也存在较大差异，chrome过小，通过font-size提大也将导致光标高度溢出
@font-face {
font-weight: normal;
font-family: password;
font-style: normal;
src: url(data:application/octet-stream;base64,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)
format('woff2');
}
.@{input-prefix-cls} {
.input();
.@{iconfont-css-prefix} {
display: inline-flex;
align-items: center;
justify-content: center;
}
&-real-password {
input {
// text-indent: .1em;
padding-right: @space-5;
font-weight: normal;
font-family: password;
font-style: normal;
/* For safety - reset parent styles, that can break glyph codes*/
font-variant: normal;
/* Font smoothing. That was taken from TWBS */
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale; // 这两行不需要 加上placeholder 会闪动
letter-spacing: 4px;
text-transform: none;
}
::-webkit-input-placeholder {
.basic-tp-config(@input-placeholder-tp);
letter-spacing: initial;
}
::-moz-placeholder {
.basic-tp-config(@input-placeholder-tp);
letter-spacing: initial;
.input-size( @input-font-size-md);
}
:-ms-input-placeholder {
letter-spacing: initial;
.input-size( @input-font-size-md);
}
// 浏览器默认填充背景色
:-webkit-autofill {
background-color: transparent;
background-image: none;
box-shadow: 0 0 0px 1000px transparent inset ;
transition: background-color 50000s ease-in-out 0s;
-webkit-text-fill-color: @input-placeholder-tp ;
}
}
::-webkit-input-placeholder {
.basic-tp-config(@input-placeholder-tp);
}
:-moz-placeholder {
.basic-tp-config(@input-placeholder-tp);
}
::-moz-placeholder {
.basic-tp-config(@input-placeholder-tp);
}
:-ms-input-placeholder {
.basic-tp-config(@input-placeholder-tp);
}
.basic-config(@input-default-tp, @input-default-p);
&[disabled],
&[aria-disabled="true"] {
&,
&:hover,
&:focus,
&:active {
color: @G4;
}
}
&-span-focus {
border-color: @B7;
&:hover {
border-color: @B7;
}
}
&-warning {
// .basic-config(@input-enhance-tp, @input-enhance-p);//测试说里面的文字不要红色
.basic-p-config(@input-enhance-p);
}
&-suffix-limit-text {
.basic-tp-config(@input-light-tp);
padding-right: @padding-m;
}
&-suffix-warning {
.basic-config(@input-enhance-tp, @input-enhance-p);
color: @input-enhance-color;
font-weight: @W2;
font-size: @T2;
}
&-warning-text {
margin-top: @padding-xsm;
margin-bottom: 0;
color: @input-enhance-color;
font-size: @T2;
}
&-warning-popover-text {
color: @input-popover-color;
}
&-tips {
margin-top: @padding-xsm;
margin-bottom: 0;
font-size: @T2;
.basic-tp-config(@input-tips-tp);
}
&-clear-wrapper {
// width: @space-3;
// height: @space-3;
// line-height: @space-3;
display: flex;
margin-right: @padding-m;
text-align: center;
cursor: pointer;
svg {
.basic-tp-config(@input-clear-tp);
pointer-events: all;
}
}
&-label-input {
height: auto;
> input {
display: none;
height: auto;
}
.@{input-prefix-cls}-clear-wrapper {
top: 4px;
}
}
&-label-wrapper {
position: relative;
display: flex;
flex-wrap: wrap;
// padding-bottom: @padding-xsm;
width: 100%;
height: 100%;
min-height: 32px;
line-height: @space-4;
list-style: none;
.@{input-prefix-cls}-label-item {
display: flex;
align-items: center;
height: @space-4;
margin: 0 2px;
margin-top: @padding-xsm;
margin-bottom: @padding-xsm;
padding: 0 @padding-sm;
list-style: none;
border-radius: 2px;
.basic-config(@input-label-tp, @input-label-p);
&[disabled],
&[aria-disabled="true"] {
&,
&:hover,
&:focus,
&:active {
color: @G4;
background-color: @G8;
}
}
.@{input-prefix-cls}-label-text {
display: inline-block;
max-width: 95px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
vertical-align: top;
}
.@{input-prefix-cls}-label-clear-icon {
width: 12px;
height: 12px;
margin-left: @padding-sm;
cursor: pointer;
.basic-tp-config(@input-clearLabel-tp);
}
}
.@{input-prefix-cls}-label-input-box {
display: inline-block;
max-width: 100%;
height: 24px;
margin-top: @padding-xsm;
margin-bottom: @padding-xsm;
padding-left: @padding-m;
margin-inline-start: 0;
input {
max-width: 100%;
margin: 0;
padding-right: 0;
padding-left: 0;
background: 0 0;
border: none;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
}
.@{input-prefix-cls}-label-input-box-placeholder {
width: 100%;
input {
width: 100%;
}
}
}
&-label-clear-wrapper {
position: absolute;
top: 2px;
right: @padding-m;
cursor: pointer;
.basic-tp-config(@input-clearLabel-tp);
}
}
.@{input-textarea-outer-prefix-cls} {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
max-width: 100%;
font-size: @T2;
&-icon-clear {
position: absolute;
top: @padding-xsm;
right: @padding-md;
width: @space-3;
height: @space-3;
margin-left: @padding-xsm;
line-height: @space-4;
text-align: center;
cursor: pointer;
.acudicon {
vertical-align: -.3em;
}
}
}
.@{input-textarea-prefix-cls} {
width: 100%;
min-width: 100%;
max-width: 100%;
padding-top: 1.5 * @padding-xsm;
padding-right: 2 * @padding-m;
padding-bottom: 6 * @padding-xsm;
padding-left: @padding-m;
overflow: auto; /* 为了在其他浏览器中生效 */
font-size: @T2;
font-family: -apple-system, BlinkMacSystemFont, 'SF Pro SC', 'SF Pro Text',
'Helvetica Neue', Helvetica, 'PingFang SC', Roboto, 'Arial',
'microsoft yahei ui', 'Microsoft YaHei', SimSun, sans-serif;
// min-height: 100px;
border: 1px solid;
border-radius: @input-border-lg-radius;
scrollbar-width: thin; /* Firefox支持 */
scrollbar-color: transparent transparent; /* Firefox支持 */
&::-webkit-input-placeholder {
color: @G6;
font-size: @T2;
.basic-tp-config(@input-placeholder-tp);
}
&:-moz-placeholder {
color: @G6;
}
&::-moz-placeholder {
.basic-tp-config(@input-placeholder-tp);
}
&:-ms-input-placeholder {
color: @G6;
}
.basic-config(@input-default-tp, @input-default-p);
&[disabled],
&[aria-disabled="true"] {
&,
&:hover,
&:focus,
&:active {
color: @G4;
}
}
&-span-focus {
border-color: @B7;
}
&:focus {
outline: none;
}
&-error {
.basic-p-config(@input-enhance-p);
}
&-warning {
color: @input-enhance-color;
}
&-autosize {
min-height: 32px;
}
&-limit-box {
color: @G5;
.basic-p-config(@input-enhance-p);
}
&-no-limit {
padding-right: 2 * @padding-m + @padding-sm;
}
&-no-clear {
padding-right: @padding-m;
}
&-readonly {
color: @G4;
background-color: @G10;
cursor: not-allowed;
pointer-events: none;
&:focus {
background-color: @G10;
border-color: @G7;
}
&:hover {
background-color: @G10;
border-color: @G7;
}
}
&-warning-popover-text {
color: @input-popover-color;
}
&-limit-box {
// display: flex;
// justify-content: flex-end;
// margin-top: 4px;
// .basic-tp-config(@input-light-tp); // 计数器在外面 antd也是
position: absolute;
right: @padding-md;
bottom: @padding-xsm;
width: auto;
height: auto;
padding-right: @padding-xsm;
padding-left: @padding-xsm;
background-color: @G11;
opacity: 0.9;
.basic-p-config(@input-enhance-p);
}
&-limit-box-readonly {
background-color: @G10;
&:focus {
background-color: @G10;
}
&:hover {
background-color: @G10;
}
}
&::-webkit-scrollbar {
width: 6px; /* 设置滚动条宽度 */
}
&::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 3px; /* 圆角边框 */
}
&:hover::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.5);
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.6);
}
&:-webkit-scrollbar-track {
background: transparent;
border-radius: 3px;
}
&:-webkit-scrollbar-button {
display: none;
}
}
.@{input-password-outer-prefix-cls} {
position: relative;
&-icon {
position: absolute;
top: 2px;
right: @padding-m;
bottom: 2px;
z-index: 1;
display: flex;
align-items: center;
cursor: pointer;
.@{iconfont-css-prefix} {
svg {
fill: @G5;
}
}
}
// &-icon&-icon-sm {
// top: -2px;
// }
&-icon:hover {
.@{iconfont-css-prefix} {
svg {
fill: @G4;
}
}
}
&-icon:active {
.@{iconfont-css-prefix} {
svg {
fill: @G3;
}
}
}
&-icon-disabled {
cursor: not-allowed;
.@{iconfont-css-prefix} {
svg {
fill: @G7 ;
}
}
}
}
.@{acud-prefix}-input-select-tags {
.@{acud-prefix}-select-clear {
right: 12px;
}
.@{select-prefix-cls}-item-checkall {
display: none ;
}
.acud-checkbox-wrapper {
display: none ;
}
.@{select-prefix-cls}-item-option-selected:not(
.acud-select-item-option-input-disabled
) {
color: #2468f2 ;
}
}
.@{acud-prefix}-select-auto-complete {
.@{acud-prefix}-select-selector {
position: relative;
display: flex;
width: 100%;
cursor: text;
}
}
.@{select-auto-complete-prefix-cls} {
display: block;
width: 100%;
&:not(.@{acud-prefix}-select-customize-input) {
.@{acud-prefix}-select-selector {
position: relative;
background-color: #fff;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
.@{acud-prefix}-select-selection-search {
.@{acud-prefix}-select-selection-search-input {
margin: 0;
padding: 0;
background: 0 0;
border: none;
outline: none;
cursor: auto;
appearance: none;
}
}
}
}
.@{select-prefix-cls}-selector {
position: relative;
display: flex;
width: 100%;
cursor: text;
.@{select-prefix-cls}-selection-search {
position: absolute;
z-index: 2;
inset: 0 12px;
.@{select-prefix-cls}-selection-search-input {
width: 100%;
}
}
.@{select-prefix-cls}-selection-placeholder {
z-index: 1;
flex: 1;
padding-right: 12px;
padding-left: 12px;
overflow: hidden;
color: #bfbfbf;
white-space: nowrap;
text-overflow: ellipsis;
transition: none;
pointer-events: none;
}
}
}