mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 05:05:48 +08:00
fix: calendar-full background
This commit is contained in:
parent
2c3c39f026
commit
f7cfb21d1c
@ -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,
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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
|
||||
// ---
|
||||
|
@ -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
|
||||
// ---
|
||||
|
Loading…
Reference in New Issue
Block a user