fix: calendar-full background

This commit is contained in:
ycjcl868 2019-12-25 18:06:50 +08:00
parent 2c3c39f026
commit f7cfb21d1c
6 changed files with 53 additions and 29 deletions

View File

@ -6,7 +6,7 @@
.@{calendar-prefix-cls} {
.reset-component;
background: @calendar-bg;
background: @calendar-full-bg;
// ========================= Header =========================
&-header {
@ -32,6 +32,7 @@
border: 0;
border-top: @border-width-base @border-style-base @border-color-split;
border-radius: 0;
background: @calendar-full-panel-bg;
.@{calendar-picker-prefix-cls}-month-panel,
.@{calendar-picker-prefix-cls}-date-panel {
@ -84,7 +85,7 @@
width: 100%;
text-align: right;
border: 0;
background: @calendar-bg;
background: @calendar-full-bg;
.@{calendar-picker-prefix-cls}-body {
th,

View File

@ -19,7 +19,7 @@
display: inline-flex;
padding: @input-padding-vertical-base @input-padding-horizontal-base @input-padding-vertical-base +
@vertical-fix-base;
background: @component-background;
background: @picker-bg;
border: @border-width-base @border-style-base @select-border-color;
border-radius: @border-radius-base;
transition: border @animation-duration-slow, box-shadow @animation-duration-slow;

View File

@ -142,18 +142,7 @@ class DrawerForm extends React.Component {
</Col>
</Row>
</Form>
<div
style={{
position: 'absolute',
right: 0,
bottom: 0,
width: '100%',
borderTop: '1px solid #e9e9e9',
padding: '10px 16px',
background: '#fff',
textAlign: 'right',
}}
>
<div className="site-form-in-drawer-wrapper">
<Button onClick={this.onClose} style={{ marginRight: 8 }}>
Cancel
</Button>
@ -169,3 +158,23 @@ class DrawerForm extends React.Component {
ReactDOM.render(<DrawerForm />, mountNode);
```
```css
.site-form-in-drawer-wrapper {
position: absolute;
right: 0px;
bottom: 0px;
width: 100%;
padding: 10px 16px;
border-top: 1px solid #e9e9e9;
background: #fff;
text-align: right;
}
```
<style>
[data-theme="dark"] .site-form-in-drawer-wrapper {
border-top: 1px solid #303030;
background: #1f1f1f;
}
</style>

View File

@ -68,19 +68,7 @@ class App extends React.Component {
>
This is two-level drawer
</Drawer>
<div
style={{
position: 'absolute',
bottom: 0,
width: '100%',
borderTop: '1px solid #e8e8e8',
padding: '10px 16px',
textAlign: 'right',
left: 0,
background: '#fff',
borderRadius: '0 0 4px 4px',
}}
>
<div className="site-multi-level-drawer-footer">
<Button
style={{
marginRight: 8,
@ -101,3 +89,24 @@ class App extends React.Component {
ReactDOM.render(<App />, mountNode);
```
```css
.site-multi-level-drawer-footer {
position: absolute;
bottom: 0;
width: 100%;
border-top: 1px solid #e8e8e8;
padding: 10px 16px;
text-align: right;
left: 0;
border-radius: 0 0 4px 4px;
background: #fff;
}
```
<style>
[data-theme="dark"] .site-multi-level-drawer-footer {
border-top: 1px solid #303030;
background: #1f1f1f;
}
</style>

View File

@ -322,6 +322,7 @@
@picker-basic-cell-hover-with-range-color: #303030;
@picker-basic-cell-disabled-bg: #303030;
@picker-border-color: @border-color-split;
@picker-bg: transparent;
// Dropdown
// ---
@ -338,9 +339,10 @@
// Calendar
// ---
@calendar-bg: @component-background;
@calendar-bg: @popover-background;
@calendar-input-bg: @calendar-bg;
@calendar-border-color: transparent;
@calendar-full-bg: @component-background;
// Badge
// ---

View File

@ -512,6 +512,7 @@
@time-picker-panel-inner-bg: @component-background;
@month-panel-bg: @component-background;
@year-panel-bg: @component-background;
@picker-bg: @component-background;
@picker-basic-cell-hover-color: @item-hover-bg;
@picker-basic-cell-hover-with-range-color: lighten(@primary-color, 35%);
@picker-basic-cell-disabled-bg: @disabled-bg;
@ -524,6 +525,8 @@
@calendar-input-bg: @input-bg;
@calendar-border-color: @border-color-inverse;
@calendar-item-active-bg: @item-active-bg;
@calendar-full-bg: @calendar-bg;
@calendar-full-panel-bg: @calendar-full-bg;
// Carousel
// ---