From 6848f4f527b56bfc6a04c5f83e5e5cc8eaa438a3 Mon Sep 17 00:00:00 2001 From: Yadong Xie Date: Wed, 9 Oct 2019 10:49:31 +0800 Subject: [PATCH] fix(module:*): fix style error with 3.23.6 (#4258) --- .editorconfig | 2 +- components/breadcrumb/style/entry.less | 1 + components/breadcrumb/style/patch.less | 7 + components/button/demo/icon.ts | 1 + components/button/demo/size.ts | 2 + components/button/doc/index.en-US.md | 2 + components/button/doc/index.zh-CN.md | 2 + .../button/nz-button-group.component.ts | 2 + components/button/nz-button.component.ts | 4 +- components/button/nz-button.spec.ts | 6 +- components/button/style/index.less | 2 +- components/button/style/mixin.less | 2 +- components/card/doc/index.en-US.md | 5 + components/card/doc/index.zh-CN.md | 4 + components/card/nz-card-grid.directive.ts | 9 +- components/core/logger/logger.ts | 8 +- components/dropdown/demo/dropdown-button.ts | 46 ++-- components/dropdown/nz-dropdown.directive.ts | 11 + components/grid/nz-col.directive.ts | 1 + components/grid/nz-grid.spec.ts | 34 ++- components/input/demo/group.ts | 2 +- components/input/demo/presuffix.ts | 11 +- components/input/doc/index.zh-CN.md | 2 +- .../skeleton/nz-skeleton.component.html | 3 +- scripts/site/_site/doc/app/app.component.html | 8 +- scripts/site/_site/doc/style/colors.less | 148 +++++----- scripts/site/_site/doc/style/common.less | 21 +- scripts/site/_site/doc/style/markdown.less | 252 +++++++++++------- scripts/site/_site/doc/theme.less | 53 +++- 29 files changed, 412 insertions(+), 239 deletions(-) create mode 100644 components/breadcrumb/style/patch.less diff --git a/.editorconfig b/.editorconfig index f5a84b5b081..19d0b6c8c02 100644 --- a/.editorconfig +++ b/.editorconfig @@ -4,7 +4,7 @@ end_of_line=lf trim_trailing_whitespace=true insert_final_newline=false indent_style=space -indent_size=4 +indent_size=2 [{*.ng,*.sht,*.html,*.shtm,*.shtml,*.htm}] indent_style=space diff --git a/components/breadcrumb/style/entry.less b/components/breadcrumb/style/entry.less index 06547c43acd..96cebe33bff 100644 --- a/components/breadcrumb/style/entry.less +++ b/components/breadcrumb/style/entry.less @@ -1 +1,2 @@ @import './index.less'; +@import './patch.less'; diff --git a/components/breadcrumb/style/patch.less b/components/breadcrumb/style/patch.less new file mode 100644 index 00000000000..95649d63aa1 --- /dev/null +++ b/components/breadcrumb/style/patch.less @@ -0,0 +1,7 @@ +.@{breadcrumb-prefix-cls} { + &-link { + .@{iconfont-css-prefix} + span { + margin-left: 4px; + } + } +} \ No newline at end of file diff --git a/components/button/demo/icon.ts b/components/button/demo/icon.ts index d9a25ef4ee8..eddcd0606a5 100644 --- a/components/button/demo/icon.ts +++ b/components/button/demo/icon.ts @@ -4,6 +4,7 @@ import { Component } from '@angular/core'; selector: 'nz-demo-button-icon', template: ` + diff --git a/components/button/demo/size.ts b/components/button/demo/size.ts index b3743fa5e32..d3bb95f6064 100644 --- a/components/button/demo/size.ts +++ b/components/button/demo/size.ts @@ -16,7 +16,9 @@ import { Component } from '@angular/core';
+ + diff --git a/components/button/doc/index.en-US.md b/components/button/doc/index.en-US.md index 1c6f9c4d0aa..5b2bcc66ee3 100644 --- a/components/button/doc/index.en-US.md +++ b/components/button/doc/index.en-US.md @@ -22,6 +22,8 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; ### [nz-button] +> Note：nz-button is Directive, it accepts all props which native button [support](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button). + To get a customized button, just set `nzType`/`nzShape`/`nzSize`/`nzLoading`/`disabled`. | Property | Description | Type | Default | Global Config | diff --git a/components/button/doc/index.zh-CN.md b/components/button/doc/index.zh-CN.md index a431157dc24..d7076af1e85 100644 --- a/components/button/doc/index.zh-CN.md +++ b/components/button/doc/index.zh-CN.md @@ -23,6 +23,8 @@ import { NzButtonModule } from 'ng-zorro-antd/button'; ### [nz-button] +> 注意：nz-button 是一个 Directive，除以下表格之外还支持例如 disabled 等原生 button 的[所有属性](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/button)。 + 通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`nzType` -> `nzShape` -> `nzSize` -> `nzLoading` -> `disabled` 按钮的属性说明如下： diff --git a/components/button/nz-button-group.component.ts b/components/button/nz-button-group.component.ts index b62c510a853..c300774fe2a 100644 --- a/components/button/nz-button-group.component.ts +++ b/components/button/nz-button-group.component.ts @@ -20,6 +20,7 @@ import { NzSizeLDSType, NzUpdateHostClassService } from 'ng-zorro-antd/core'; }) export class NzButtonGroupComponent implements OnInit { private _size: NzSizeLDSType; + isInDropdown = false; @Input() get nzSize(): NzSizeLDSType { @@ -37,6 +38,7 @@ export class NzButtonGroupComponent implements OnInit { const prefixCls = 'ant-btn-group'; const classMap = { [prefixCls]: true, + [`ant-dropdown-button`]: this.isInDropdown, [`${prefixCls}-lg`]: this.nzSize === 'large', [`${prefixCls}-sm`]: this.nzSize === 'small' }; diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts index d0807b10d20..9c61da76547 100644 --- a/components/button/nz-button.component.ts +++ b/components/button/nz-button.component.ts @@ -81,7 +81,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O @Input() @WithConfig('default') nzSize: NzSizeLDSType; readonly el: HTMLElement = this.elementRef.nativeElement; - + isInDropdown = false; private iconElement: HTMLElement; private iconOnly = false; private destroy$ = new Subject(); @@ -95,7 +95,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O [`${prefixCls}-${this.nzShape}`]: this.nzShape, [`${prefixCls}-${sizeMap[this.nzSize]}`]: sizeMap[this.nzSize], [`${prefixCls}-loading`]: this.nzLoading, - [`${prefixCls}-icon-only`]: this.iconOnly, + [`${prefixCls}-icon-only`]: this.iconOnly && !this.nzSearch && !this.isInDropdown, [`${prefixCls}-background-ghost`]: this.nzGhost, [`${prefixCls}-block`]: this.nzBlock, [`ant-input-search-button`]: this.nzSearch diff --git a/components/button/nz-button.spec.ts b/components/button/nz-button.spec.ts index 008bf653c5c..0653e48a6a3 100644 --- a/components/button/nz-button.spec.ts +++ b/components/button/nz-button.spec.ts @@ -143,9 +143,9 @@ describe('button', () => { fixture.detectChanges(); expect(buttons[0].nativeElement.classList.contains('ant-btn-icon-only')).toBe(true); expect(buttons[0].nativeElement.classList.contains('ant-btn-circle')).toBe(true); - expect(buttons[1].nativeElement.classList.contains('ant-btn-icon-only')).toBe(false); - expect(buttons[1].nativeElement.firstElementChild!.classList.contains('anticon-search')).toBe(true); - expect(buttons[1].nativeElement.firstElementChild.style.cssText).toBe('display: inline-block;'); + expect(buttons[2].nativeElement.classList.contains('ant-btn-icon-only')).toBe(false); + expect(buttons[2].nativeElement.firstElementChild!.classList.contains('anticon-search')).toBe(true); + expect(buttons[2].nativeElement.firstElementChild.style.cssText).toBe('display: inline-block;'); })); }); diff --git a/components/button/style/index.less b/components/button/style/index.less index 8cfc3768f94..661afdf81bc 100644 --- a/components/button/style/index.less +++ b/components/button/style/index.less @@ -207,4 +207,4 @@ a.@{btn-prefix-cls} { &-sm { line-height: @btn-height-sm - 2px; } -} +} \ No newline at end of file diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less index 9fa89d62367..65c0d19cc4a 100644 --- a/components/button/style/mixin.less +++ b/components/button/style/mixin.less @@ -351,4 +351,4 @@ border-top-left-radius: 0; border-bottom-left-radius: 0; } -} +} \ No newline at end of file diff --git a/components/card/doc/index.en-US.md b/components/card/doc/index.en-US.md index 96ed56da184..4445c8f35df 100644 --- a/components/card/doc/index.en-US.md +++ b/components/card/doc/index.en-US.md @@ -50,6 +50,11 @@ import { NzCardModule } from 'ng-zorro-antd/card'; | `[nzTitle]` | title content | `string\|TemplateRef` | - | ### [nz-card-grid] + +| Property | Description | Type | Default | Global Config | +| -------- | ----------- | ---- | ------- | ------------- | +| `[nzHoverable]` | Lift up when hovering card | `boolean` | `true` | - | + Area for grid style card ### nz-card-tab diff --git a/components/card/doc/index.zh-CN.md b/components/card/doc/index.zh-CN.md index eb95b0a7584..753f5939d6a 100644 --- a/components/card/doc/index.zh-CN.md +++ b/components/card/doc/index.zh-CN.md @@ -51,6 +51,10 @@ import { NzCardModule } from 'ng-zorro-antd/card'; ### [nz-card-grid] +| 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | +| --- | --- | --- | --- | --- | +| `[nzHoverable]` | 鼠标移过时可浮起 | `boolean` | `true` | - | + 分隔卡片内容区域 ### nz-card-tab diff --git a/components/card/nz-card-grid.directive.ts b/components/card/nz-card-grid.directive.ts index 9a2f203cbff..d8a3c93cd75 100644 --- a/components/card/nz-card-grid.directive.ts +++ b/components/card/nz-card-grid.directive.ts @@ -6,13 +6,18 @@ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE */ -import { Directive, ElementRef, Renderer2 } from '@angular/core'; +import { Directive, ElementRef, Input, Renderer2 } from '@angular/core'; +import { InputBoolean } from 'ng-zorro-antd/core'; @Directive({ selector: '[nz-card-grid]', - exportAs: 'nzCardGrid' + exportAs: 'nzCardGrid', + host: { + '[class.ant-card-hoverable]': 'nzHoverable' + } }) export class NzCardGridDirective { + @Input() @InputBoolean() nzHoverable: boolean = true; constructor(elementRef: ElementRef, renderer: Renderer2) { renderer.addClass(elementRef.nativeElement, 'ant-card-grid'); } diff --git a/components/core/logger/logger.ts b/components/core/logger/logger.ts index 44458bc9a87..dcf87f6e7ba 100644 --- a/components/core/logger/logger.ts +++ b/components/core/logger/logger.ts @@ -36,8 +36,12 @@ function consoleCommonBehavior(consoleFunc: (...args: any) => void, ...args: any export const warn = (...args: any[]) => consoleCommonBehavior((...arg: any[]) => console.warn(PREFIX, ...arg), ...args); export const warnDeprecation = (...args: any[]) => { - const stack = new Error().stack; - return consoleCommonBehavior((...arg: any[]) => console.warn(PREFIX, 'deprecated:', ...arg, stack), ...args); + if (!environment.isTestMode) { + const stack = new Error().stack; + return consoleCommonBehavior((...arg: any[]) => console.warn(PREFIX, 'deprecated:', ...arg, stack), ...args); + } else { + return () => {}; + } }; // Log should only be printed in dev mode. diff --git a/components/dropdown/demo/dropdown-button.ts b/components/dropdown/demo/dropdown-button.ts index ff409714382..15a41a0cbd7 100644 --- a/components/dropdown/demo/dropdown-button.ts +++ b/components/dropdown/demo/dropdown-button.ts @@ -3,30 +3,28 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-dropdown-dropdown-button', template: ` -
- - - - - - - - - - - - - + -
+ + + + + + + + + +
  • menu1 1st menu item
    • @@ -59,7 +57,7 @@ import { Component } from '@angular/core'; styles: [ ` nz-button-group { - margin-right: 8px; + margin: 0 8px 8px 0; } ` ] diff --git a/components/dropdown/nz-dropdown.directive.ts b/components/dropdown/nz-dropdown.directive.ts index 4dab88be598..afed5fb895a 100644 --- a/components/dropdown/nz-dropdown.directive.ts +++ b/components/dropdown/nz-dropdown.directive.ts @@ -22,14 +22,17 @@ import { Directive, ElementRef, EventEmitter, + Host, Input, OnChanges, OnDestroy, + Optional, Output, Renderer2, SimpleChanges, ViewContainerRef } from '@angular/core'; +import { NzButtonComponent, NzButtonGroupComponent } from 'ng-zorro-antd/button'; import { DEFAULT_DROPDOWN_POSITIONS, InputBoolean, POSITION_MAP } from 'ng-zorro-antd/core'; import { combineLatest, fromEvent, merge, EMPTY, Observable, Subject, Subscription } from 'rxjs'; import { debounceTime, distinctUntilChanged, filter, map, mapTo, takeUntil, tap } from 'rxjs/operators'; @@ -237,9 +240,17 @@ export class NzDropDownDirective implements AfterViewInit, OnDestroy, OnChanges private renderer: Renderer2, private overlay: Overlay, private platform: Platform, + @Optional() @Host() private nzButtonComponent: NzButtonComponent, + @Optional() private nzButtonGroupComponent: NzButtonGroupComponent, private viewContainerRef: ViewContainerRef ) { renderer.addClass(elementRef.nativeElement, 'ant-dropdown-trigger'); + if (this.nzButtonComponent) { + this.nzButtonComponent.isInDropdown = true; + } + if (this.nzButtonGroupComponent) { + this.nzButtonGroupComponent.isInDropdown = true; + } } ngAfterViewInit(): void { diff --git a/components/grid/nz-col.directive.ts b/components/grid/nz-col.directive.ts index d109612f580..fe852884c20 100644 --- a/components/grid/nz-col.directive.ts +++ b/components/grid/nz-col.directive.ts @@ -56,6 +56,7 @@ export class NzColDirective implements OnInit, OnChanges, AfterViewInit, OnDestr /** temp solution since no method add classMap to host https://github.com/angular/angular/issues/7289*/ setClassMap(): void { const classMap = { + [`${this.prefixCls}`]: true, [`${this.prefixCls}-${this.nzSpan}`]: isNotNil(this.nzSpan), [`${this.prefixCls}-order-${this.nzOrder}`]: isNotNil(this.nzOrder), [`${this.prefixCls}-offset-${this.nzOffset}`]: isNotNil(this.nzOffset), diff --git a/components/grid/nz-grid.spec.ts b/components/grid/nz-grid.spec.ts index a0ae969387b..9bdcf7cb627 100644 --- a/components/grid/nz-grid.spec.ts +++ b/components/grid/nz-grid.spec.ts @@ -223,11 +223,11 @@ describe('grid', () => { it('should have correct style', () => { fixture.detectChanges(); expect(rows.every(row => row.nativeElement.classList.contains('ant-row'))).toBe(true); - expect(cols[0].nativeElement.className).toBe('ant-col-8'); - expect(cols[1].nativeElement.className).toBe('ant-col-8 ant-col-offset-8'); - expect(cols[2].nativeElement.className).toBe('ant-col-6 ant-col-offset-6'); - expect(cols[3].nativeElement.className).toBe('ant-col-6 ant-col-offset-6'); - expect(cols[4].nativeElement.className).toBe('ant-col-12 ant-col-offset-6'); + expect(cols[0].nativeElement.className).toBe('ant-col ant-col-8'); + expect(cols[1].nativeElement.className).toBe('ant-col ant-col-8 ant-col-offset-8'); + expect(cols[2].nativeElement.className).toBe('ant-col ant-col-6 ant-col-offset-6'); + expect(cols[3].nativeElement.className).toBe('ant-col ant-col-6 ant-col-offset-6'); + expect(cols[4].nativeElement.className).toBe('ant-col ant-col-12 ant-col-offset-6'); }); }); @@ -250,11 +250,15 @@ describe('grid', () => { it('should have correct style', () => { fixture.detectChanges(); - expect(cols[0].nativeElement.className).toBe('ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10'); + expect(cols[0].nativeElement.className).toBe( + 'ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10' + ); expect(cols[1].nativeElement.className).toBe( - 'ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4' + 'ant-col ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4' + ); + expect(cols[2].nativeElement.className).toBe( + 'ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10' ); - expect(cols[2].nativeElement.className).toBe('ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10'); }); }); @@ -276,11 +280,15 @@ describe('grid', () => { }); it('should have correct style', () => { fixture.detectChanges(); - expect(cols[0].nativeElement.className).toBe('ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2'); + expect(cols[0].nativeElement.className).toBe( + 'ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2' + ); expect(cols[1].nativeElement.className).toBe( - 'ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2' + 'ant-col ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2' + ); + expect(cols[2].nativeElement.className).toBe( + 'ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2' ); - expect(cols[2].nativeElement.className).toBe('ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2'); }); }); @@ -303,8 +311,8 @@ describe('grid', () => { it('should have correct style', () => { fixture.detectChanges(); - expect(cols[0].nativeElement.className).toBe('ant-col-18 ant-col-push-6'); - expect(cols[1].nativeElement.className).toBe('ant-col-6 ant-col-pull-18'); + expect(cols[0].nativeElement.className).toBe('ant-col ant-col-18 ant-col-push-6'); + expect(cols[1].nativeElement.className).toBe('ant-col ant-col-6 ant-col-pull-18'); }); }); diff --git a/components/input/demo/group.ts b/components/input/demo/group.ts index a42d3fa8eed..faefe6404da 100644 --- a/components/input/demo/group.ts +++ b/components/input/demo/group.ts @@ -4,7 +4,7 @@ import { Component } from '@angular/core'; selector: 'nz-demo-input-group', template: ` -
    +
    diff --git a/components/input/demo/presuffix.ts b/components/input/demo/presuffix.ts index 714c0d81c81..63e93292e75 100644 --- a/components/input/demo/presuffix.ts +++ b/components/input/demo/presuffix.ts @@ -3,13 +3,18 @@ import { Component } from '@angular/core'; @Component({ selector: 'nz-demo-input-presuffix', template: ` - + - - + +
    +
    + + + ` }) export class NzDemoInputPresuffixComponent {} diff --git a/components/input/doc/index.zh-CN.md b/components/input/doc/index.zh-CN.md index af840ca1d0e..3709c61ddba 100755 --- a/components/input/doc/index.zh-CN.md +++ b/components/input/doc/index.zh-CN.md @@ -36,7 +36,7 @@ nz-input 可以使用所有的W3C标准下的所有 [使用方式](https://www.w | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | `[nzAddOnAfter]` | 带标签的 input，设置后置标签，可以与 `nzAddOnBefore` 配合使用 | `string \| TemplateRef` | - | -| `[nzAddOnBefore]` | 带标签的 input，设置前置标签，可以与 `nzAddOnBefore` 配合使用 | `string \| TemplateRef` | - | +| `[nzAddOnBefore]` | 带标签的 input，设置前置标签，可以与 `nzAddOnAfter` 配合使用 | `string \| TemplateRef` | - | | `[nzPrefix]` | 带有前缀图标的 input，可以与 `nzSuffix` 配合使用 | `string \| TemplateRef` | - | | `[nzSuffix]` | 带有后缀图标的 input，可以与 `nzPrefix` 配合使用 | `string \| TemplateRef` | - | | `[nzCompact]` | 是否用紧凑模式 | `boolean` | `false` | diff --git a/components/skeleton/nz-skeleton.component.html b/components/skeleton/nz-skeleton.component.html index c9ff8d4b89b..72da3496e62 100644 --- a/components/skeleton/nz-skeleton.component.html +++ b/components/skeleton/nz-skeleton.component.html @@ -1,7 +1,6 @@ -
    +
  • -

    {{isExperimental ? 'Experiments' : 'Components'}}

     + +

    'Experiments'

    +

    + {{language=='en' ? 'Components' : '组件'}} + 63 +

    +
    • a { - color: @site-text-color; -} +.menu-site { + .ant-menu-item > a { + color: @site-text-color; + } -.menu-site .ant-menu-item-selected > a, -.menu-site .ant-menu-item > a:hover { - color: @primary-color; + .ant-menu-item-selected > a, + .ant-menu-item > a:hover { + color: @primary-color; + } + + .menu-antd-components-count { + margin-left: .5em; + color: @disabled-color; + font-size: 12px; + } } #react-content { diff --git a/scripts/site/_site/doc/style/markdown.less b/scripts/site/_site/doc/style/markdown.less index bab76254095..2983cdf55da 100755 --- a/scripts/site/_site/doc/style/markdown.less +++ b/scripts/site/_site/doc/style/markdown.less @@ -9,7 +9,7 @@ } .markdown img { - max-width: ~"calc(100% - 32px)"; + max-width: ~'calc(100% - 32px)'; } .markdown p > img { @@ -17,14 +17,18 @@ box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35); } +.markdown p > img.markdown-inline-image { + margin: 0; + box-shadow: none; +} + .markdown h1 { + margin-top: 8px; + margin-bottom: 20px; color: @site-heading-color; font-weight: 500; - margin-bottom: 20px; - margin-top: 8px; - font-family: Avenir, @font-family; font-size: 30px; - font-variant: tabular-nums; + font-family: Avenir, @font-family, sans-serif; line-height: 38px; .subtitle { @@ -42,25 +46,32 @@ .markdown h4, .markdown h5, .markdown h6 { - color: @site-heading-color; - font-family: Avenir, @font-family; - font-variant: tabular-nums; + clear: both; margin: 1.6em 0 0.6em; + color: @site-heading-color; font-weight: 500; - clear: both; + font-family: Avenir, @font-family, sans-serif; } -.markdown h3 { font-size: 18px; } -.markdown h4 { font-size: 16px; } -.markdown h5 { font-size: 14px; } -.markdown h6 { font-size: 12px; } +.markdown h3 { + font-size: 18px; +} +.markdown h4 { + font-size: 16px; +} +.markdown h5 { + font-size: 14px; +} +.markdown h6 { + font-size: 12px; +} .markdown hr { + clear: both; height: 1px; - border: 0; - background: @site-border-color-split; margin: 56px 0; - clear: both; + background: @site-border-color-split; + border: 0; } .markdown p, @@ -69,18 +80,18 @@ } .markdown ul > li { - list-style-type: circle; margin-left: 20px; padding-left: 4px; + list-style-type: circle; &:empty { display: none; } } .markdown ol > li { - list-style-type: decimal; margin-left: 20px; padding-left: 4px; + list-style-type: decimal; } .markdown ul > li > p, @@ -90,27 +101,27 @@ .markdown code { margin: 0 1px; + padding: 0.2em 0.4em; + font-size: 0.9em; background: #f2f4f5; - padding: .2em .4em; - border-radius: 3px; - font-size: .9em; border: 1px solid #eee; + border-radius: 3px; } .markdown pre { - border-radius: @border-radius-sm; + font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #f2f4f5; - font-family: "Lucida Console", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + border-radius: @border-radius-sm; } .markdown pre code { - border: none; - background: #f2f4f5; margin: 0; padding: 0; - font-size: @font-size-base - 1px; - color: @site-text-color; overflow: auto; + color: @site-text-color; + font-size: @font-size-base - 1px; + background: #f2f4f5; + border: none; } .markdown strong, @@ -119,34 +130,34 @@ } .markdown > table { - border-collapse: collapse; - border-spacing: 0; - empty-cells: show; - border: 1px solid @site-border-color-split; width: 100%; margin: 8px 0 16px; + empty-cells: show; + border: 1px solid @site-border-color-split; + border-collapse: collapse; + border-spacing: 0; } .markdown > table th { - white-space: nowrap; color: #5c6b77; font-weight: 500; + white-space: nowrap; background: rgba(0, 0, 0, 0.02); } .markdown > table th, .markdown > table td { - border: 1px solid @site-border-color-split; padding: 16px 24px; text-align: left; + border: 1px solid @site-border-color-split; } .markdown blockquote { - font-size: 90%; + margin: 1em 0; + padding-left: 0.8em; color: @site-text-color-secondary; + font-size: 90%; border-left: 4px solid @site-border-color-split; - padding-left: 0.8em; - margin: 1em 0; } .markdown blockquote p { @@ -154,9 +165,9 @@ } .markdown .anchor { + margin-left: 8px; opacity: 0; transition: opacity 0.3s ease; - margin-left: 8px; } .markdown .waiting { @@ -189,8 +200,8 @@ .markdown h4:hover .anchor, .markdown h5:hover .anchor, .markdown h6:hover .anchor { - opacity: 1; display: inline-block; + opacity: 1; } .markdown > br, @@ -198,55 +209,111 @@ clear: both; } -.markdown.api-container table { - font-size: @font-size-base; - line-height: @line-height-base; - font-family: @code-family; - border-width: 0; - margin: 2em 0; - th, td { - padding: 14px 16px; - border-width: 1px 0; - border-color: @border-color-split; - } - th { - border-width: 0 0 2px 0; - } - td:first-child { - font-weight: 500; - width: 20%; - color: @blue-9; - } - td:nth-child(3) { - width: 22%; - font-size: @font-size-base - 1px; - color: @magenta-7; - word-break: break-all; - } - td:last-child { - width: 13%; +.markdown.api-container { + overflow-x: auto; + + table { + min-width: 720px; + margin: 2em 0; font-size: @font-size-base - 1px; - } - // 移除【类型】与【默认值】栏的代码样式 - td:nth-child(3), - td:last-child { - code { - background: none; - border: none; - padding: 0; - margin: 0; - font-size: inherit; + font-family: @code-family; + line-height: @line-height-base; + border: 1px solid @border-color-split; + + th, + td { + padding: 12px; + border-color: @border-color-split; + border-width: 1px 0; + } + + th { + padding-top: 14px; + border-width: 0 0 2px 0; + } + + tbody tr { + transition: all 0.3s; + &:hover { + background: rgba(60, 90, 100, 0.04); + } + } + + td { + &:first-child { + width: 20%; + color: @gray-8; + font-weight: 600; + } + &:nth-child(3) { + width: 22%; + color: @magenta-7; + font-size: @font-size-base - 1px; + word-break: break-all; + } + &:nth-child(4) { + width: 13%; + font-size: @font-size-base - 1px; + } } } } .grid-demo, -[id^="components-grid-demo-"] { +[id^='components-grid-demo-'] { .demo-row, .code-box-demo .demo-row { - background-image: linear-gradient(90deg, #f5f5f5 4.16666667%, transparent 4.16666667%, transparent 8.33333333%, #f5f5f5 8.33333333%, #f5f5f5 12.5%, transparent 12.5%, transparent 16.66666667%, #f5f5f5 16.66666667%, #f5f5f5 20.83333333%, transparent 20.83333333%, transparent 25%, #f5f5f5 25%, #f5f5f5 29.16666667%, transparent 29.16666667%, transparent 33.33333333%, #f5f5f5 33.33333333%, #f5f5f5 37.5%, transparent 37.5%, transparent 41.66666667%, #f5f5f5 41.66666667%, #f5f5f5 45.83333333%, transparent 45.83333333%, transparent 50%, #f5f5f5 50%, #f5f5f5 54.16666667%, transparent 54.16666667%, transparent 58.33333333%, #f5f5f5 58.33333333%, #f5f5f5 62.5%, transparent 62.5%, transparent 66.66666667%, #f5f5f5 66.66666667%, #f5f5f5 70.83333333%, transparent 70.83333333%, transparent 75%, #f5f5f5 75%, #f5f5f5 79.16666667%, transparent 79.16666667%, transparent 83.33333333%, #f5f5f5 83.33333333%, #f5f5f5 87.5%, transparent 87.5%, transparent 91.66666667%, #f5f5f5 91.66666667%, #f5f5f5 95.83333333%, transparent 95.83333333%); - overflow: hidden; margin-bottom: 8px; + overflow: hidden; + background-image: linear-gradient( + 90deg, + #f5f5f5 4.16666667%, + transparent 4.16666667%, + transparent 8.33333333%, + #f5f5f5 8.33333333%, + #f5f5f5 12.5%, + transparent 12.5%, + transparent 16.66666667%, + #f5f5f5 16.66666667%, + #f5f5f5 20.83333333%, + transparent 20.83333333%, + transparent 25%, + #f5f5f5 25%, + #f5f5f5 29.16666667%, + transparent 29.16666667%, + transparent 33.33333333%, + #f5f5f5 33.33333333%, + #f5f5f5 37.5%, + transparent 37.5%, + transparent 41.66666667%, + #f5f5f5 41.66666667%, + #f5f5f5 45.83333333%, + transparent 45.83333333%, + transparent 50%, + #f5f5f5 50%, + #f5f5f5 54.16666667%, + transparent 54.16666667%, + transparent 58.33333333%, + #f5f5f5 58.33333333%, + #f5f5f5 62.5%, + transparent 62.5%, + transparent 66.66666667%, + #f5f5f5 66.66666667%, + #f5f5f5 70.83333333%, + transparent 70.83333333%, + transparent 75%, + #f5f5f5 75%, + #f5f5f5 79.16666667%, + transparent 79.16666667%, + transparent 83.33333333%, + #f5f5f5 83.33333333%, + #f5f5f5 87.5%, + transparent 87.5%, + transparent 91.66666667%, + #f5f5f5 91.66666667%, + #f5f5f5 95.83333333%, + transparent 95.83333333% + ); } .ant-row-flex, .code-box-demo .ant-row-flex { @@ -256,33 +323,32 @@ .code-box-demo .ant-row > div, .ant-row-flex > div, .code-box-demo .ant-row-flex > div { - padding: 5px 0; - text-align: center; - border-radius: 0; min-height: 30px; margin-top: 8px; margin-bottom: 8px; + padding: 5px 0; color: #fff; + text-align: center; + border-radius: 0; } .code-box-demo .ant-row > div:not(.gutter-row), .code-box-demo .ant-row-flex > div:not(.gutter-row) { - background: #00a0e9; padding: 16px 0; - &:nth-child(2n+1) { + background: #00a0e9; + &:nth-child(2n + 1) { background: fade(#00a0e9, 70%); } } .ant-row .demo-col, .code-box-demo .ant-row .demo-col { - text-align: center; + margin-top: 0; + margin-bottom: 0; padding: 30px 0; color: #fff; font-size: 18px; + text-align: center; border: none; - margin-top: 0; - margin-bottom: 0; } - .ant-row .demo-col-1, .ant-row .demo-col-1 { background: fade(#00a0e9, 70%); } @@ -292,8 +358,8 @@ } .ant-row .demo-col-3, .code-box-demo .ant-row .demo-col-3 { - background: rgba(255, 255, 255, 0.2); color: #999; + background: rgba(255, 255, 255, 0.2); } .ant-row .demo-col-4, .code-box-demo .ant-row .demo-col-4 { @@ -301,8 +367,8 @@ } .ant-row .demo-col-5, .code-box-demo .ant-row .demo-col-5 { - background: rgba(255, 255, 255, 0.5); color: #999; + background: rgba(255, 255, 255, 0.5); } .code-box-demo .height-100 { height: 100px; @@ -326,17 +392,17 @@ .markdown ul.ant-timeline { line-height: 2; li.ant-timeline-item { - list-style: none; margin: 0; padding: 0 0 30px; + list-style: none; .ant-timeline-item-content { - font-size: 14px; - padding-left: 32px; position: relative; top: -14px; + padding-left: 32px; + font-size: 14px; > h2 { margin-top: 0; - padding-top: 2px; + padding-top: 4px; } } } diff --git a/scripts/site/_site/doc/theme.less b/scripts/site/_site/doc/theme.less index 35a6f3d5ff2..9b7351f2d57 100755 --- a/scripts/site/_site/doc/theme.less +++ b/scripts/site/_site/doc/theme.less @@ -175,6 +175,10 @@ @btn-circle-size-lg: @btn-height-lg; @btn-circle-size-sm: @btn-height-sm; +@btn-square-size: @btn-height-base; +@btn-square-size-lg: @btn-height-lg; +@btn-square-size-sm: @btn-height-sm; + @btn-group-border: @primary-5; // Checkbox @@ -183,8 +187,10 @@ @checkbox-check-color: #fff; @checkbox-border-width: @border-width-base; -// Dropdown +// Descriptions +@descriptions-bg: #fafafa; +// Dropdown @dropdown-selected-color: @primary-color; // Empty @@ -312,6 +318,9 @@ @input-border-color: @border-color-base; @input-bg: @component-background; @input-number-handler-active-bg: #f4f4f4; +@input-number-handler-hover-bg: @primary-5; +@input-number-handler-bg: @component-background; +@input-number-handler-border-color: @border-color-base; @input-addon-bg: @background-color-light; @input-hover-border-color: @primary-5; @input-disabled-bg: @disabled-bg; @@ -321,6 +330,13 @@ // --- @select-border-color: @border-color-base; @select-item-selected-font-weight: 600; +@select-dropdown-bg: @component-background; +@select-item-selected-bg: @background-color-light; +@select-item-active-bg: @item-active-bg; + +// Anchor +// --- +@anchor-border-color: @border-color-split; // Tooltip // --- @@ -360,7 +376,8 @@ @modal-body-padding: 24px; @modal-header-bg: @component-background; @modal-footer-bg: transparent; -@modal-mask-bg: fade(@black, 65%); +@modal-footer-border-color-split: @border-color-split; +@modal-mask-bg: fade(@black, 45%); // Progress // -- @@ -381,6 +398,17 @@ @menu-item-active-bg: @item-active-bg; @menu-item-active-border-width: 3px; @menu-item-group-title-color: @text-color-secondary; +@menu-icon-size: @font-size-base; +@menu-icon-size-lg: @font-size-lg; + +@menu-item-vertical-margin: 4px; +@menu-item-font-size: @font-size-base; +@menu-item-boundary-margin: 8px; +@menu-icon-size: @font-size-base; +@menu-icon-size-lg: @font-size-lg; +@menu-dark-selected-item-icon-color: @white; +@menu-dark-selected-item-text-color: @white; +@dark-menu-item-hover-bg: transparent; // dark theme @menu-dark-color: @text-color-secondary-dark; @@ -389,7 +417,9 @@ @menu-dark-submenu-bg: #000c17; @menu-dark-highlight-color: #fff; @menu-dark-item-active-bg: @primary-color; - +@menu-dark-selected-item-icon-color: @white; +@menu-dark-selected-item-text-color: @white; +@menu-dark-item-hover-bg: transparent; // Spin // --- @spin-dot-size-sm: 14px; @@ -411,6 +441,8 @@ @table-padding-vertical: 16px; @table-padding-horizontal: 16px; @table-border-radius-base: @border-radius-base; +@table-footer-bg: @background-color-light; +@table-footer-color: @heading-color; // Tag // -- @@ -452,7 +484,8 @@ @card-inner-head-padding: 12px; @card-padding-base: 24px; @card-actions-background: @background-color-light; -@card-background: #cfd8dc; +@card-skeleton-bg: #cfd8dc; +@card-background: @component-background; @card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09); @card-radius: @border-radius-sm; @@ -527,8 +560,10 @@ // PageHeader // --- -@page-header-padding-horizontal: 24px; +@page-header-padding: 24px; @page-header-padding-vertical: 16px; +@page-header-padding-breadcrumb: 12px; +@page-header-back-color: #000; // Breadcrumb // --- @@ -567,6 +602,8 @@ @tree-child-padding: 18px; @tree-directory-selected-color: #fff; @tree-directory-selected-bg: @primary-color; +@tree-node-hover-bg: @item-hover-bg; +@tree-node-selected-bg: @primary-2; // Collapse // --- @@ -624,7 +661,7 @@ @statistic-title-font-size: @font-size-base; @statistic-content-font-size: 24px; @statistic-unit-font-size: 16px; -@statistic-font-family: Tahoma, 'Helvetica Neue', @font-family; +@statistic-font-family: @font-family; // Drawer // --- @@ -638,3 +675,7 @@ @timeline-dot-border-width: 2px; @timeline-dot-color: @primary-color; @timeline-dot-bg: @component-background; + +// Typography +// --- +@typography-title-font-weight: 600;