github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: add some less var

pull/5820/head
tangjinzhou 2022-05-21 17:31:39 +08:00
parent 9d1e5d72b5
commit e6a46b43ac
4 changed files with 38 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/style/mixins/modal-mask.less
View File

@ -4,7 +4,7 @@
pointer-events: none;
&.@{ant-prefix}-zoom-enter,
&.@{ant-prefix}zoom-appear {
&.@{ant-prefix}-zoom-appear {
transform: none; // reset scale avoid mousePosition bug
opacity: 0;
animation-duration: @animation-duration-slow;

8
components/style/themes/dark.less
View File

@ -447,3 +447,11 @@
// Mentions
// ---
@mentions-dropdown-bg: @popover-background;
// Segmented
// ---
@segmented-bg: fade(@black, 25%);
@segmented-hover-bg: fade(@black, 45%);
@segmented-selected-bg: #333333;
@segmented-label-color: fade(@white, 65%);
@segmented-label-hover-color: fade(@white, 85%);

16
components/style/themes/default.less
View File

@ -525,11 +525,12 @@
// Tooltip background color
@tooltip-bg: rgba(0, 0, 0, 0.75);
// Tooltip arrow width
@tooltip-arrow-width: 5px;
@tooltip-arrow-width: 8px * sqrt(2);
// Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
// Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
@tooltip-border-radius: @border-radius-base;
// Popover
// ---
@ -541,7 +542,7 @@
@popover-min-width: 177px;
@popover-min-height: 32px;
// Popover arrow width
@popover-arrow-width: 6px;
@popover-arrow-width: @tooltip-arrow-width;
// Popover arrow color
@popover-arrow-color: @popover-bg;
// Popover outer arrow width
@ -677,6 +678,7 @@
// Tag
// --
@tag-border-radius: @border-radius-base;
@tag-default-bg: @background-color-light;
@tag-default-color: @text-color;
@tag-font-size: @font-size-sm;
@ -873,7 +875,7 @@
@breadcrumb-font-size: @font-size-base;
@breadcrumb-icon-font-size: @font-size-base;
@breadcrumb-link-color: @text-color-secondary;
@breadcrumb-link-color-hover: @primary-5;
@breadcrumb-link-color-hover: @text-color;
@breadcrumb-separator-color: @text-color-secondary;
@breadcrumb-separator-margin: 0 @padding-xs;
@ -1071,3 +1073,11 @@
@image-preview-operation-size: 18px;
@image-preview-operation-color: @text-color-dark;
@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);
// Segmented
// ---
@segmented-bg: fade(@black, 4%);
@segmented-hover-bg: fade(@black, 6%);
@segmented-selected-bg: @white;
@segmented-label-color: fade(@black, 65%);
@segmented-label-hover-color: #262626;

22
components/style/themes/variable.less
View File

@ -11,7 +11,7 @@
@base-primary: @blue-6;
html {
@{html-selector} {
// ========= Primary Color =========
--@{ant-prefix}-primary-color: @base-primary;
--@{ant-prefix}-primary-color-hover: color(~`colorPalette('@{base-primary}', 5) `);
@ -227,7 +227,7 @@ html {
// Border color
@border-color-base: hsv(0, 0, 85%); // base border outline a component
@border-color-split: hsv(0, 0, 94%); // split border inside a component
@border-color-split: rgba(0, 0, 0, 0.06); // split border inside a component
@border-color-inverse: @white;
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border
@ -580,11 +580,12 @@ html {
// Tooltip background color
@tooltip-bg: rgba(0, 0, 0, 0.75);
// Tooltip arrow width
@tooltip-arrow-width: 5px;
@tooltip-arrow-width: 8px * sqrt(2);
// Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
// Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
@tooltip-border-radius: @border-radius-base;
// Popover
// ---
@ -596,7 +597,7 @@ html {
@popover-min-width: 177px;
@popover-min-height: 32px;
// Popover arrow width
@popover-arrow-width: 6px;
@popover-arrow-width: @tooltip-arrow-width;
// Popover arrow color
@popover-arrow-color: @popover-bg;
// Popover outer arrow width
@ -635,7 +636,7 @@ html {
// Progress
// --
@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
@progress-remaining-color: rgba(0, 0, 0, 0.04);
@progress-info-text-color: @progress-text-color;
@progress-radius: 100px;
@progress-steps-item-bg: #f3f3f3;
@ -732,6 +733,7 @@ html {
// Tag
// --
@tag-border-radius: @border-radius-base;
@tag-default-bg: @background-color-light;
@tag-default-color: @text-color;
@tag-font-size: @font-size-sm;
@ -928,7 +930,7 @@ html {
@breadcrumb-font-size: @font-size-base;
@breadcrumb-icon-font-size: @font-size-base;
@breadcrumb-link-color: @text-color-secondary;
@breadcrumb-link-color-hover: @primary-5;
@breadcrumb-link-color-hover: @text-color;
@breadcrumb-separator-color: @text-color-secondary;
@breadcrumb-separator-margin: 0 @padding-xs;
@ -1126,3 +1128,11 @@ html {
@image-preview-operation-size: 18px;
@image-preview-operation-color: @text-color-dark;
@image-preview-operation-disabled-color: fade(@image-preview-operation-color, 25%);
// Segmented
// ---
@segmented-bg: fade(@black, 4%);
@segmented-hover-bg: fade(@black, 6%);
@segmented-selected-bg: @white;
@segmented-label-color: fade(@black, 65%);
@segmented-label-hover-color: #262626;