Browse Source
* feat: support narrow theme mode * chore: rename narrow to compact * chore: height part * chore: preview compact mode * chore: to make site corrected * chore: preview site * docs: 📖 document compact theme usage * docs: tweak theme doc * docs: 📖 Add description about double css bundle size * chore: preview * chore: for preview * chore: adjust pagination * chore: compact mode done! * chore: remove useless todo * chore: fix review bug * chore: fix review bug * chore: fix card margin * chore: fix review bug * chore: fix review bug * chore: improve i18n and transition * Update site/theme/static/common.less Co-Authored-By: 偏右 <afc163@gmail.com> * chore: fix button size and description padding * chore: update snapshots * chore: add compact css bundlesize limit * chore: compact dist support Co-authored-by: afc163 <afc163@gmail.com>pull/22712/head
zefeng
5 years ago
committed by
GitHub
GitHub
72 changed files with 716 additions and 376 deletions
@ -1,40 +1,44 @@ |
|||
@import '../../style/themes/index'; |
|||
|
|||
.@{list-prefix-cls}-bordered { |
|||
border: 1px solid @border-color-base; |
|||
border-radius: @border-radius-base; |
|||
.@{list-prefix-cls}-header { |
|||
padding-right: 24px; |
|||
padding-left: 24px; |
|||
padding-right: @padding-lg; |
|||
padding-left: @padding-lg; |
|||
} |
|||
|
|||
.@{list-prefix-cls}-footer { |
|||
padding-right: 24px; |
|||
padding-left: 24px; |
|||
padding-right: @padding-lg; |
|||
padding-left: @padding-lg; |
|||
} |
|||
|
|||
.@{list-prefix-cls}-item { |
|||
padding-right: 24px; |
|||
padding-left: 24px; |
|||
padding-right: @padding-lg; |
|||
padding-left: @padding-lg; |
|||
} |
|||
|
|||
.@{list-prefix-cls}-pagination { |
|||
margin: 16px 24px; |
|||
margin: @margin-md @margin-lg; |
|||
} |
|||
|
|||
&.@{list-prefix-cls}-sm { |
|||
.@{list-prefix-cls}-item { |
|||
padding-right: 16px; |
|||
padding-left: 16px; |
|||
padding: @list-item-padding-sm; |
|||
} |
|||
.@{list-prefix-cls}-header, |
|||
.@{list-prefix-cls}-footer { |
|||
padding: 8px 16px; |
|||
padding: @list-item-padding-sm; |
|||
} |
|||
} |
|||
|
|||
&.@{list-prefix-cls}-lg { |
|||
.@{list-prefix-cls}-item { |
|||
padding: @list-item-padding-lg; |
|||
} |
|||
.@{list-prefix-cls}-header, |
|||
.@{list-prefix-cls}-footer { |
|||
padding: 16px 24px; |
|||
padding: @list-item-padding-lg; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,2 @@ |
|||
@import './themes/compact.less'; |
|||
@import './core/index'; |
|||
@ -0,0 +1,172 @@ |
|||
@import './default.less'; |
|||
|
|||
@mode: compact; |
|||
|
|||
// default paddings |
|||
@default-padding-lg: 24px; // containers |
|||
@default-padding-md: 16px; // small containers and buttons |
|||
@default-padding-sm: 12px; // Form controls and items |
|||
@default-padding-xs: 8px; // small items |
|||
@default-padding-xss: 4px; // more small |
|||
|
|||
// vertical paddings |
|||
@padding-lg: 16px; // containers |
|||
@padding-md: 8px; // small containers and buttons |
|||
@padding-sm: 8px; // Form controls and items |
|||
@padding-xs: 4px; // small items |
|||
@padding-xss: 0px; // more small |
|||
|
|||
// vertical padding for all form controls |
|||
@control-padding-horizontal: @padding-sm; |
|||
@control-padding-horizontal-sm: @default-padding-xs; |
|||
|
|||
// vertical margins |
|||
@margin-lg: 16px; // containers |
|||
@margin-md: 8px; // small containers and buttons |
|||
@margin-sm: 8px; // Form controls and items |
|||
@margin-xs: 4px; // small items |
|||
@margin-xss: 0px; // more small |
|||
|
|||
// height rules |
|||
@height-base: 28px; |
|||
@height-lg: 32px; |
|||
@height-sm: 22px; |
|||
|
|||
// Button |
|||
// --- |
|||
@btn-padding-horizontal-base: @default-padding-sm - 1px; |
|||
@btn-padding-horizontal-lg: @btn-padding-horizontal-base; |
|||
@btn-padding-horizontal-sm: @default-padding-xs - 1px; |
|||
@btn-square-only-icon-size: 14px; |
|||
@btn-square-only-icon-size-sm: 14px; |
|||
@btn-square-only-icon-size-lg: 16px; |
|||
|
|||
//Dropdown |
|||
@dropdown-line-height: 18px; |
|||
|
|||
// Form |
|||
// --- |
|||
@form-item-margin-bottom: 16px; |
|||
|
|||
// Input |
|||
// --- |
|||
@input-padding-vertical-base: max( |
|||
round((@input-height-base - @font-size-base * @line-height-base) / 2 * 10) / 10 - |
|||
@border-width-base, |
|||
2px |
|||
); |
|||
@input-padding-horizontal-lg: 11px; |
|||
|
|||
// PageHeader |
|||
// --- |
|||
@page-header-padding: 16px; |
|||
@page-header-padding-vertical: 8px; |
|||
|
|||
// Pagination |
|||
// --- |
|||
@pagination-mini-options-size-changer-top: 1px; |
|||
|
|||
// Cascader |
|||
// ---- |
|||
@cascader-dropdown-line-height: @dropdown-line-height; |
|||
|
|||
// Select |
|||
// --- |
|||
@select-dropdown-height: @height-base; |
|||
@select-single-item-height-lg: 32px; |
|||
@select-multiple-item-height: @input-height-base - max(@input-padding-vertical-base, 4) * 2; // Normal 24px |
|||
@select-multiple-item-height-lg: 24px; |
|||
@select-multiple-item-spacing-half: 3px; |
|||
|
|||
// Tree |
|||
// --- |
|||
@tree-title-height: 20px; |
|||
|
|||
// Transfer |
|||
// --- |
|||
@transfer-item-padding-vertical: 3px; |
|||
@transfer-list-search-icon-top: 8px; |
|||
|
|||
// Comment |
|||
// --- |
|||
@comment-actions-margin-bottom: 0px; |
|||
@comment-actions-margin-top: @margin-xs; |
|||
@comment-content-detail-p-margin-bottom: 0px; |
|||
|
|||
// Steps |
|||
// --- |
|||
@steps-icon-size: 24px; |
|||
@steps-icon-custom-size: 20px; |
|||
@steps-icon-custom-font-size: 20px; |
|||
@steps-icon-custom-top: 2px; |
|||
@steps-icon-margin: 2px 8px 2px 0; |
|||
@steps-icon-font-size: @font-size-base; |
|||
@steps-dot-top: 4px; |
|||
@steps-icon-top: 0px; |
|||
|
|||
// Collapse |
|||
// --- |
|||
@collapse-header-padding-extra: 32px; |
|||
|
|||
// List |
|||
// --- |
|||
@list-item-meta-description-font-size: @font-size-sm; |
|||
@list-item-padding-sm: 4px 12px; |
|||
@list-item-padding-lg: 12px 16px; |
|||
|
|||
// Drawer |
|||
// --- |
|||
@drawer-header-padding: 11px @padding-lg; |
|||
@drawer-footer-padding-vertical: @padding-sm; |
|||
@drawer-header-close-size: 44px; |
|||
|
|||
// Modal |
|||
// -- |
|||
@modal-header-padding: 11px @padding-lg; |
|||
@modal-footer-padding-vertical: @padding-sm; |
|||
@modal-header-close-size: 44px; |
|||
@modal-confirm-body-padding: 24px 24px 16px; |
|||
|
|||
// popover |
|||
// -- |
|||
@popover-min-height: 28px; |
|||
@popover-padding-horizontal: @default-padding-sm; |
|||
|
|||
// Card |
|||
// --- |
|||
@card-padding-base: 16px; |
|||
@card-head-height: 36px; |
|||
@card-head-font-size: @card-head-font-size-sm; |
|||
@card-head-padding: 8px; |
|||
@card-padding-base: 12px; |
|||
@card-padding-base-sm: @card-padding-base; |
|||
@card-head-height-sm: 30px; |
|||
@card-head-padding-sm: 4px; |
|||
@card-actions-li-margin: 4px 0; |
|||
@card-head-tabs-margin-bottom: -9px; |
|||
|
|||
// Table |
|||
// --- |
|||
@table-padding-vertical: 12px; |
|||
@table-padding-horizontal: 8px; |
|||
@table-padding-vertical-md: 8px; |
|||
@table-padding-horizontal-md: 8px; |
|||
@table-padding-vertical-sm: 4px; |
|||
@table-padding-horizontal-sm: 4px; |
|||
|
|||
// Statistic |
|||
// --- |
|||
@statistic-content-font-size: 20px; |
|||
|
|||
// Alert |
|||
// --- |
|||
@alert-with-description-no-icon-padding-vertical: 11px; |
|||
|
|||
// Skeleton |
|||
// --- |
|||
@skeleton-paragraph-margin-top: 20px; |
|||
@skeleton-paragraph-li-margin-top: 12px; |
|||
|
|||
// Descriptions |
|||
@descriptions-title-margin-bottom: 8px; |
|||
@descriptions-default-padding: 12px @padding-lg; |
|||
@ -0,0 +1,15 @@ |
|||
const fs = require('fs'); |
|||
const path = require('path'); |
|||
const lessToJs = require('less-vars-to-js'); |
|||
|
|||
const stylePath = path.join(__dirname, '..', 'components', 'style'); |
|||
const colorLess = fs.readFileSync(path.join(stylePath, 'color', 'colors.less'), 'utf8'); |
|||
const defaultLess = fs.readFileSync(path.join(stylePath, 'themes', 'default.less'), 'utf8'); |
|||
const compactLess = fs.readFileSync(path.join(stylePath, 'themes', 'compact.less'), 'utf8'); |
|||
|
|||
const compactPaletteLess = lessToJs(`${colorLess}${defaultLess}${compactLess}`, { |
|||
stripPrefix: true, |
|||
resolveVariables: false, |
|||
}); |
|||
|
|||
module.exports = compactPaletteLess; |
|||
@ -1,34 +1,17 @@ |
|||
import React from 'react'; |
|||
import Icon from '@ant-design/icons'; |
|||
|
|||
export const DefaultIcon = props => { |
|||
const ThemeIcon = props => { |
|||
const SVGIcon = () => ( |
|||
<svg width={21} height={21} viewBox="0 0 21 21" {...props}> |
|||
<g fill="none" fillRule="evenodd"> |
|||
<circle fill="#222" cx={10.5} cy={10.5} r={10.5} /> |
|||
<path |
|||
d="M13.396 11c0-3.019-1.832-5.584-4.394-6.566A6.427 6.427 0 0111.304 4C15.002 4 18 7.135 18 11c0 3.866-2.998 7-6.698 7A6.42 6.42 0 019 17.566c2.564-.98 4.396-3.545 4.396-6.566z" |
|||
fill="#FFF" |
|||
fillRule="nonzero" |
|||
/> |
|||
<svg width={21} height={21} viewBox="0 0 21 21" fill="currentColor" {...props}> |
|||
<g fillRule="evenodd"> |
|||
<g fillRule="nonzero"> |
|||
<path d="M7.02 3.635l12.518 12.518a1.863 1.863 0 010 2.635l-1.317 1.318a1.863 1.863 0 01-2.635 0L3.068 7.588A2.795 2.795 0 117.02 3.635zm2.09 14.428a.932.932 0 110 1.864.932.932 0 010-1.864zm-.043-9.747L7.75 9.635l9.154 9.153 1.318-1.317-9.154-9.155zM3.52 12.473c.514 0 .931.417.931.931v.932h.932a.932.932 0 110 1.864h-.932v.931a.932.932 0 01-1.863 0l-.001-.931h-.93a.932.932 0 010-1.864h.93v-.932c0-.514.418-.931.933-.931zm15.374-3.727a1.398 1.398 0 110 2.795 1.398 1.398 0 010-2.795zM4.385 4.953a.932.932 0 000 1.317l2.046 2.047L7.75 7 5.703 4.953a.932.932 0 00-1.318 0zM14.701.36a.932.932 0 01.931.932v.931h.932a.932.932 0 010 1.864h-.933l.001.932a.932.932 0 11-1.863 0l-.001-.932h-.93a.932.932 0 110-1.864h.93v-.931a.932.932 0 01.933-.932z" /> |
|||
</g> |
|||
</g> |
|||
</svg> |
|||
); |
|||
return <Icon component={SVGIcon} {...props} />; |
|||
}; |
|||
|
|||
export const DarkIcon = props => { |
|||
const SVGIcon = () => ( |
|||
<svg width={21} height={21} viewBox="0 0 21 21" {...props}> |
|||
<g fill="none" fillRule="evenodd"> |
|||
<path |
|||
fill="#222" |
|||
fillRule="nonzero" |
|||
d="M21 10.5l-3 3V18h-4.5l-3 3-3-3H3v-4.5l-3-3 3-3V3h4.5l3-3 3 3H18v4.5z" |
|||
/> |
|||
<circle stroke="#FFF" strokeWidth={1.5} cx={10.5} cy={10.5} r={4} /> |
|||
</g> |
|||
</svg> |
|||
); |
|||
return <Icon component={SVGIcon} {...props} />; |
|||
}; |
|||
export default ThemeIcon; |
|||
|
|||
Loading…
Reference in new issue