test/amis2
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-29 18:48:45 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #10988 from allenve/fix-scssWarning

Browse Source 
fix: fix scss deprecation warning
This commit is contained in:
Allen 2024-10-08 19:30:42 +08:00 committed by GitHub
commit ef0f3e3693
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
17 changed files with 129 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
examples/style.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
@import 'node_modules/amis-ui/scss/mixins';
@import 'node_modules/amis-ui/scss/functions';
@import 'node_modules/amis-ui/scss/variables';
@ -55,7 +56,7 @@ body {
bottom: 0;
margin-left: -2px;
width: 4px;
background: lighten($dark, 20%);
background: color.adjust($dark, $lightness: 20%);
z-index: 1;
cursor: col-resize;

20
packages/amis-ui/scss/_components.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
:root,
.AMISCSSWrapper {
--button-default-default-top-border-color: var(--colors-neutral-line-8);
@ -2893,18 +2894,21 @@
);
--Form-select-multiple-bgColor: var(--colors-neutral-fill-10);
--Form-selectOption-height: var(--Form-select-height);
--Form-selectValue-bg: #{saturate(lighten($info, 40%), 2.5%)};
--Form-selectValue-bg: #{color.adjust(
color.adjust($info, $lightness: 40%),
$saturation: 2.5%
)};
--Form-selectValue-onHover-bgColor: var(--select-multiple-hover-bg-color);
--Form-selectValue-borderColor: var(--colors-brand-7);
--Form-selectValue-color: var(--colors-brand-5);
--Form-selectValue-fontSize: var(--select-multiple-fontSize);
--Form-selectValue-onDisable-bg: #{lighten(
saturate(lighten($info, 40%), 2.5%),
5%
--Form-selectValue-onDisable-bg: #{color.adjust(
color.adjust(color.adjust($info, $lightness: 40%), $saturation: 2.5%),
$lightness: 5%
)};
--Form-selectValue-onHover-bg: #{darken(
saturate(lighten($info, 40%), 2.5%),
5%
--Form-selectValue-onHover-bg: #{color.adjust(
color.adjust(color.adjust($info, $lightness: 40%), $saturation: 2.5%),
$lightness: -5%
)};
--Form-selectValue-onDisabled-color: var(--Form-select-caret-iconColor);
--Form-selectValue-onInvalid-color: var(--danger);
@ -4020,7 +4024,7 @@
--Table-onHover-boxShadow: var(--shadows-shadow-normal);
--Table-onHover-color: var(--table-body-hover-color);
--Table-onModified-bg: #e8f0fe;
--Table-onModified-borderColor: #{darken(#e8f0fe, 5%)};
--Table-onModified-borderColor: #{color.adjust(#e8f0fe, $lightness: -5%)};
--Table-onModified-color: #4285f4;
--Table-placeholder-height: #{px2rem(200px)};
--Table-strip-bg: transparent;

37
packages/amis-ui/scss/_mixins.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
// 媒体查询最小阈值
@mixin media-breakpoint-up($name, $breakpoints: $breakpoints) {
$min: breakpoint-min($name, $breakpoints);
@ -53,14 +54,16 @@
}
}
// @deprecated 不建议用了
@mixin color-schema($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
background: saturate(darken($bg-color, $percent), $sat-percent);
background: color.adjust(
color.adjust($bg-color, $lightness: -$percent),
$saturation: $sat-percent
);
}
// @deprecated 不建议用了
@mixin color-schema-lt($bg-color: #555, $percent: 15%, $sat-percent: 100%) {
background: desaturate(lighten($bg-color, $percent), $sat-percent);
$lightened-color: color.adjust($bg-color, $lightness: $percent);
background: color.adjust($lightened-color, $saturation: $sat-percent);
}
// @deprecated 不建议用了
@ -101,8 +104,14 @@
// @deprecated 不建议用了
@mixin font-variant($bg-color) {
$font-color: desaturate(lighten($bg-color, 40%), 10%);
$link-color: desaturate(lighten($bg-color, 50%), 10%);
$font-color: color.adjust(
color.adjust($bg-color, $lightness: 40%),
$saturation: -10%
);
$link-color: color.adjust(
color.adjust($bg-color, $lightness: 50%),
$saturation: -10%
);
$hover-color: #fff;
color: $font-color;
@ -124,11 +133,11 @@
}
& .text-muted {
color: darken($text-color, 10%) !important;
color: color.adjust($text-color, $lightness: -10%) !important;
}
& .text-lt {
color: lighten($text-color, 25%) !important;
color: color.adjust($text-color, $lightness: 25%) !important;
}
// &.auto,
@ -150,11 +159,11 @@
// @deprecated 不建议用了
@mixin text-wariant($bg-color, $name) {
a.bg-#{'' + $name}:hover {
background: darken($bg-color, 5%);
background: color.adjust($bg-color, $lightness: -5%);
}
a.text-#{'' + $name}:hover {
color: darken($bg-color, 5%);
color: color.adjust($bg-color, $lightness: -5%);
}
.text-#{'' + $name} {
@ -162,19 +171,19 @@
}
.text-#{'' + $name}-lt {
color: darken($bg-color, 5%);
color: color.adjust($bg-color, $lightness: -5%);
}
.text-#{'' + $name}-lter {
color: darken($bg-color, 10%);
color: color.adjust($bg-color, $lightness: -10%);
}
.text-#{'' + $name}-dk {
color: darken($bg-color, 5%);
color: color.adjust($bg-color, $lightness: -5%);
}
.text-#{'' + $name}-dker {
color: darken($bg-color, 10%);
color: color.adjust($bg-color, $lightness: -10%);
}
}

51
packages/amis-ui/scss/_properties.scss
View File

@ -1,3 +1,4 @@
@use 'sass:color';
@import './functions';
@import './variables';
$remFactor: 16px;
@ -209,14 +210,17 @@ $Table-strip-bg: transparent;
--Card-onChecked-bg: var(--colors-neutral-fill-11);
--Card-onChecked-borderColor: var(--colors-brand-5);
--Card-onChecked-color: var(--colors-brand-5);
--Card-onChecked-fieldLabel-color: #{lighten(darken(#d9f3fb, 40%), 20%)};
--Card-onChecked-fieldLabel-color: #{color.adjust(
color.adjust(#d9f3fb, $lightness: -40%),
$lightness: 20%
)};
--Card-onDragging-opacity: 0.1;
--Card-onModified-bg: var(--colors-neutral-fill-8);
--Card-onModified-borderColor: var(--colors-brand-5);
--Card-onModified-color: var(--colors-brand-6);
--Card-onModified-fieldLabel-color: var(--colors-brand-8);
--Card-onModified-onHover-bg: #{darken(#e8f0fe, 5%)};
--Card-onModified-onHover-color: #{darken(#4285f4, 10%)};
--Card-onModified-onHover-bg: #{color.adjust(#e8f0fe, $lightness: -5%)};
--Card-onModified-onHover-color: #{color.adjust(#4285f4, $lightness: -10%)};
--Cards--unsaved-heading-bg: #e8f0fe;
--Cards--unsaved-heading-color: #4285f4;
--Cards-fixedTop-boxShadow: var(--shadows-shadow-normal);
@ -405,16 +409,28 @@ $Table-strip-bg: transparent;
--Layout-aside--md-width: #{px2rem(250px)};
--Layout-aside--sm-width: #{px2rem(150px)};
--Layout-aside-bg: var(--colors-neutral-fill-2);
--Layout-aside-color: #{desaturate(lighten($dark, 40%), 10%)};
--Layout-aside-onAcitve-bg: #{saturate(darken($dark, 5%), 2.5%)};
--Layout-aside-onHover-bg: #{saturate(darken($dark, 3%), 2.5%)};
--Layout-aside-color: #{color.adjust(
color.adjust($dark, $lightness: 40%),
$saturation: -10%
)};
--Layout-aside-onAcitve-bg: #{color.adjust(
color.adjust($dark, $lightness: -5%),
$saturation: 2.5%
)};
--Layout-aside-onHover-bg: #{color.adjust(
color.adjust($dark, $lightness: -3%),
$saturation: 2.5%
)};
--Layout-aside-subList-bg: var(--colors-neutral-fill-2);
--Layout-aside-onAcitve-onHover-bg: var(--Layout-aside-onAcitve-bg);
--Layout-aside-width: #{px2rem(180px)};
--Layout-aside-width-collapsed: #{px2rem(60px)};
--Layout-asideDivider-bg: var(--colors-neutral-line-3);
--Layout-asideDivider-margin: 0 var(--sizes-size-6);
--Layout-asideLabel-color: #{darken(desaturate(lighten($dark, 40%), 10%), 10%)};
--Layout-asideLabel-color: #{color.adjust(
color.adjust(color.adjust($dark, $lightness: 40%), $saturation: -10%),
$lightness: -10%
)};
--Layout-asideLink-color: var(--colors-neutral-text-11);
--Layout-asideLink-fontSize: var(--fonts-size-8);
--Layout-asideLink-arrowFontSize: var(--fonts-size-8);
@ -430,7 +446,10 @@ $Table-strip-bg: transparent;
--Layout-asideLink-onHover-arrowColor: var(--colors-neutral-text-11);
--Layout-brand-bg: var(--colors-neutral-fill-2);
--Layout-brand-color: var(--colors-neutral-text-11);
--Layout-brandBar-color: #{desaturate(lighten($dark, 40%), 10%)};
--Layout-brandBar-color: #{color.adjust(
color.adjust($dark, $lightness: 40%),
$saturation: -10%
)};
--Layout-header-bg: var(--colors-neutral-fill-10);
--Layout-header-boxShadow: none;
--Layout-header-height: #{px2rem(50px)};
@ -498,9 +517,12 @@ $Table-strip-bg: transparent;
--ListItem-onChecked-fieldLabel-color: var(--colors-brand-4);
--ListItem-onDragging-opacity: 0.1;
--ListItem-onModified-bg: #e8f0fe;
--ListItem-onModified-borderColor: #{darken(#e8f0fe, 10%)};
--ListItem-onModified-borderColor: #{color.adjust(#e8f0fe, $lightness: -10%)};
--ListItem-onModified-color: #4285f4;
--ListItem-onModified-fieldLabel-color: #{lighten(#4285f4, 20%)};
--ListItem-onModified-fieldLabel-color: #{color.adjust(
#4285f4,
$lightness: 20%
)};
--ListItem-paddingX: var(--gap-base);
--ListItem-paddingY: var(--gap-sm);
--ListItem--onHover-bg: rgba(0, 126, 255, 0.08);
@ -705,7 +727,7 @@ $Table-strip-bg: transparent;
--Tooltip-arrow-color: var(--Tooltip-bg);
--Tooltip-arrow-color--dark: rgba(7, 12, 20, 0.85);
--Tooltip-arrow-height: #{px2rem(4px)};
--Tooltip-arrow-outerColor: #{fade-in($borderColor, 0.05)};
--Tooltip-arrow-outerColor: #{color.adjust($borderColor, $alpha: 0.05)};
--Tooltip-arrow-width: #{px2rem(8px)};
--Tooltip-bg: var(--background);
--Tooltip-bg--dark: rgba(7, 12, 20, 0.85);
@ -723,8 +745,11 @@ $Table-strip-bg: transparent;
--Tooltip-maxWidth: #{px2rem(240px)};
--Tooltip-minWidth: auto;
--Tooltip-title-fontWeight: bold;
--Tooltip-title-bg: #{darken($white, 3%)};
--Tooltip-title-borderBottom-color: #{darken(darken($white, 3%), 5%)};
--Tooltip-title-bg: #{color.adjust($white, $lightness: -3%)};
--Tooltip-title-borderBottom-color: #{color.adjust(
color.adjust($white, $lightness: -3%),
$lightness: -5%
)};
--Tooltip-title-color: var(--text--loud-color);
--Tooltip-title-color--dark: #fff;
--Tooltip-title-paddingX: var(--gap-base);

3
packages/amis-ui/scss/_variables.scss
View File

@ -1,5 +1,6 @@
// 这里只放 sass 里的变量，因为有很多颜色计算，为了保持和之前的兼容性所以还保留这些变量，但后续会通过新增 css 自定义属性的方式逐渐替换
// 类名前缀
@use 'sass:color';
$ns: '' !default;
$remFactor: 16px !default;
@ -433,6 +434,6 @@ $zindex-debug: 4000 !default;
$zindex-spinner-overlay: 11 !default;
$Form--horizontal-columns: 12;
$Table-strip-bg: lighten(#f6f8f8, 1%) !default;
$Table-strip-bg: color.adjust(#f6f8f8, $lightness: 1%) !default;
$Number-handler-mode: 'vertical';
$Wizard-steps-liAfterBorder: px2rem(18px) solid transparent !default;

8
packages/amis-ui/scss/components/_array-input.scss
View File

@ -48,13 +48,13 @@
&-toolbar {
margin-top: var(--gap-sm);
&--dnd {
padding-left: 29px;
}
display: flex;
flex-direction: row;
justify-content: space-between;
&--dnd {
padding-left: 29px;
}
}
&-sortTip {

3
packages/amis-ui/scss/components/_input-box.scss
View File

@ -1,7 +1,8 @@
.#{$ns}InputBox {
height: var(--input-size-default-height);
@include input-input();
@include input-border();
height: var(--input-size-default-height);
&--inline {
display: inline-flex;

8
packages/amis-ui/scss/components/_json-schema-editor.scss
View File

@ -134,16 +134,14 @@
&-info {
min-width: 0;
min-height: 0;
@include input-input();
@include input-border();
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
@include input-input();
@include input-border();
}
&-typeLabel {
color: var(--Form-input-placeholderColor);

4
packages/amis-ui/scss/components/_result-box.scss
View File

@ -1,6 +1,4 @@
.#{$ns}ResultBox {
@include input-input();
@include input-border();
flex-wrap: nowrap;
padding: 0 px2rem(12px);
min-height: var(--Form-input-height);
@ -24,6 +22,8 @@
var(--select-base-default-paddingBottom)
var(--select-base-default-paddingLeft);
@include input-input();
@include input-border();
&.is-error {
border-color: var(--Form-input-onError-borderColor);
background: var(--Form-input-onError-bg);

7
packages/amis-ui/scss/components/_tag.scss
View File

@ -26,14 +26,13 @@
}
&--normal {
&--hasColor {
color: var(--white);
}
border-width: var(--Tag-normal-borderWidth);
border-radius: var(--Tag-normal-borderRadius);
border-color: var(--Tag-normal-borderColor);
&--hasColor {
color: var(--white);
}
&--inactive {
color: var(--Tag-inactive-color);
background: var(--Tag-inactive-bg-color);

12
packages/amis-ui/scss/components/_toast.scss
View File

@ -59,12 +59,6 @@
justify-content: space-between;
align-items: flex-start;
&-wrap {
pointer-events: none;
position: fixed;
z-index: $zindex-toast;
}
max-width: var(--Toast-width);
pointer-events: auto;
margin-bottom: var(--gap-xs);
@ -83,6 +77,12 @@
transform: translateZ(0);
width: px2rem(400px);
&-wrap {
pointer-events: none;
position: fixed;
z-index: $zindex-toast;
}
&.in,
&.out {
animation-fill-mode: both;

28
packages/amis-ui/scss/components/form/_image.scss
View File

@ -26,20 +26,6 @@
cursor: pointer;
margin-right: var(--gap-base);
&-bg {
position: absolute;
z-index: 0;
overflow: hidden;
left: 0;
right: 0;
top: 0;
bottom: 0;
.#{$ns}Image {
border: 0;
}
}
@include button-variant(
var(--ImageControl-addBtn-bg),
var(--ImageControl-addBtn-color),
@ -103,6 +89,20 @@
var(--shadows-shadow-none)
);
&-bg {
position: absolute;
z-index: 0;
overflow: hidden;
left: 0;
right: 0;
top: 0;
bottom: 0;
.#{$ns}Image {
border: 0;
}
}
svg {
top: 0;
margin-bottom: var(--inputImage-base-default-icon-margin);

16
packages/amis-ui/scss/components/form/_list.scss
View File

@ -122,14 +122,6 @@
border-color: var(--ListControl-item-onActive-borderColor);
color: var(--ListControl-item-onActive-color);
&:hover {
background: var(--ListControl-item-onActive-onHover-bg);
}
.b-inherit {
border-color: var(--ListControl-item-onActive-color);
}
border-width: var(--listSelect-base-active-top-border-width)
var(--listSelect-base-active-right-border-width)
var(--listSelect-base-active-bottom-border-width)
@ -148,6 +140,14 @@
var(--listSelect-base-active-bottom-left-border-radius);
background: var(--listSelect-base-active-bg-color);
&:hover {
background: var(--ListControl-item-onActive-onHover-bg);
}
.b-inherit {
border-color: var(--ListControl-item-onActive-color);
}
&:before {
content: '';
position: absolute;

2
packages/amis-ui/scss/components/form/_picker.scss
View File

@ -1,6 +1,6 @@
.#{$ns}Picker {
@include input-text();
outline: none;
@include input-text();
&-input:hover {
background: var(--Pick-status-hover-bgColor);

7
packages/amis-ui/scss/components/form/_select.scss
View File

@ -45,9 +45,6 @@
}
}
&--block {
display: flex;
}
vertical-align: middle;
text-align: left;
align-items: center;
@ -72,6 +69,10 @@
color: var(--Form-select-color);
transition: all var(--animation-duration) ease-in-out;
&--block {
display: flex;
}
&:hover {
background: var(--Form-select-onHover-bg);
border-width: var(--select-base-hover-top-border-width)

8
packages/amis-ui/scss/components/form/_textarea.scss
View File

@ -1,9 +1,9 @@
.#{$ns}TextareaControl {
@include input-text();
--Form-input-clearBtn-padding: #{px2rem(2px)};
position: relative;
@include input-text();
> textarea.#{$ns}TextareaControl-input--counter {
// 23 px 是计数器 counter 的高度
padding-bottom: px2rem(23px);
@ -12,8 +12,6 @@
}
> textarea {
@include input-border();
border: 1px solid var(--Form-input-borderColor);
border-radius: var(--Form-input-borderRadius);
color: var(--colors-neutral-text-2);
@ -27,6 +25,8 @@
outline: none;
resize: vertical;
@include input-border();
&::placeholder {
color: var(--Form-input-placeholderColor);
}

2
packages/amis-ui/scss/components/form/_tree-select.scss
View File

@ -15,8 +15,8 @@
}
.#{$ns}TreeSelect {
@include input-text();
outline: none;
@include input-text();
&.is-opened {
border-color: var(--Form-input-onFocused-borderColor);