Skip to content

Commit ae0428d

Browse files
author
gongjs
committed
修改grid.scss文件
1 parent 039334d commit ae0428d

File tree

5 files changed

+101
-109
lines changed

5 files changed

+101
-109
lines changed

‎example/src/pages/grid/grid.scss

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
.r-grid-demo1, .r-grid-demo2, .r-grid-demo3 {
2-
height: 30px;
1+
.r-grid-demo1, .r-grid-demo2, .r-grid-demo3, .r-grid-demo4 {
32
margin-bottom: 20px;
43
font-weight: 500;
54
font-size: 16px;

‎example/src/pages/grid/index.tsx

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -126,35 +126,35 @@ export default () => {
126126
</Row>`}
127127
>
128128
<Row className="r-grid-demo3">
129-
<Col xl={6} lg={8}>
129+
<Col xl={8} lg={12}>
130130
Col
131131
</Col>
132-
<Col xl={12} lg={8}>
132+
<Col xl={8} lg={12}>
133133
Col
134134
</Col>
135-
<Col xl={6} lg={8}>
135+
<Col xl={8} lg={12}>
136136
Col
137137
</Col>
138138
</Row>
139139
<Row className="r-grid-demo4">
140140
<Col
141141
className="item"
142142
xl={{ span: 5, offset: 1 }}
143-
lg={{ span: 6, offset: 2 }}
143+
lg={{ span: 8, offset: 0 }}
144144
>
145145
Col
146146
</Col>
147147
<Col
148148
className="item"
149149
xl={{ span: 11, offset: 1 }}
150-
lg={{ span: 6, offset: 2 }}
150+
lg={{ span: 8, offset: 0 }}
151151
>
152152
Col
153153
</Col>
154154
<Col
155155
className="item"
156156
xl={{ span: 5, offset: 1 }}
157-
lg={{ span: 6, offset: 2 }}
157+
lg={{ span: 8, offset: 0 }}
158158
>
159159
Col
160160
</Col>

‎lib/components/grid/grid.scss

Lines changed: 51 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,62 @@
11
@mixin widthChange($span) {
2-
$prefix: #{$span}-col-span-;
3-
4-
$prefix: #{$span}-col-offset-;
5-
6-
&.#{$span}-col-span-0 {
7-
display: none;
8-
}
9-
10-
@for $n from 1 through 24 {
11-
&.#{$prefix}#{$n} {
12-
width: ($n/24)*100%;
13-
}
2+
$prefix: #{$span}-col-span-;
3+
@for $n from 1 through 24 {
4+
&.#{$prefix}#{$n} {
5+
width: ($n/24)*100%;
146
}
15-
16-
@for $n from 1 through 24 {
17-
&.#{$prefix}#{$n} {
18-
margin-left: ($n/24)*100%;
19-
}
7+
}
8+
$prefix: #{$span}-col-offset-;
9+
@for $n from 1 through 24 {
10+
&.#{$prefix}#{$n} {
11+
margin-left: ($n/24)*100%;
2012
}
13+
}
14+
&.#{$span}-col-span-0 {
15+
display: none;
16+
}
2117
}
2218

2319
.r-row {
24-
display: flex;
25-
flex-wrap: wrap;
20+
display: flex;
21+
flex-wrap: wrap;
2622
}
2723

2824
.r-col {
29-
box-sizing: border-box;
30-
$prefix: col-span-;
31-
32-
$prefix: col-offset-;
33-
34-
&.col-span-0 {
35-
display: none;
25+
box-sizing: border-box;
26+
$prefix: col-span-;
27+
@for $n from 1 through 24 {
28+
&.#{$prefix}#{$n} {
29+
width: ($n/24)*100%;
3630
}
37-
38-
@for $n from 1 through 24 {
39-
&.#{$prefix}#{$n} {
40-
width: ($n/24)*100%;
41-
}
31+
}
32+
$prefix: col-offset-;
33+
@for $n from 1 through 24 {
34+
&.#{$prefix}#{$n} {
35+
margin-left: ($n/24)*100%;
4236
}
43-
44-
@for $n from 1 through 24 {
45-
&.#{$prefix}#{$n} {
46-
margin-left: ($n/24)*100%;
47-
}
48-
}
49-
}
50-
51-
// sm
52-
@media (min-width:577px) {
53-
@include widthChange(sm)
54-
;}
55-
56-
// md
57-
@media (min-width: 769px) {
58-
@include widthChange(md)
59-
;}
60-
61-
// lg
62-
@media (min-width: 993px) {
63-
@include widthChange(lg)
64-
;}
65-
66-
// xl
67-
@media (min-width: 1201px) {
68-
@include widthChange(xl)
69-
;}
37+
}
38+
39+
&.col-span-0 {
40+
display: none;
41+
}
42+
43+
// sm
44+
@media (min-width: 577px) {
45+
@include widthChange(sm);
46+
}
47+
48+
// md
49+
@media (min-width: 769px) {
50+
@include widthChange(md);
51+
}
52+
53+
// lg
54+
@media (min-width: 993px) {
55+
@include widthChange(lg);
56+
}
57+
58+
// xl
59+
@media (min-width: 1201px) {
60+
@include widthChange(xl);
61+
}
62+
}

‎lib/components/message/message.scss

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,20 @@
2020
}
2121
}
2222
.r-message {
23+
position: fixed;
24+
z-index: 1010;
25+
top: 16px;
26+
left: 0;
27+
list-style: none;
2328
box-sizing: border-box;
24-
margin: 0;
29+
width: 100%;
2530
padding: 0;
26-
color: rgba(0, 0, 0, 0.65);
27-
font-size: 14px;
31+
margin: 0;
2832
font-variant: tabular-nums;
33+
font-size: 14px;
2934
line-height: 1.5715;
30-
list-style: none;
3135
font-feature-settings: 'tnum';
32-
position: fixed;
33-
top: 16px;
34-
left: 0;
35-
z-index: 1010;
36-
width: 100%;
36+
color: rgba(0, 0, 0, 0.65);
3737
pointer-events: none;
3838
&-wrapper {
3939
padding: 8px;
@@ -42,14 +42,14 @@
4242
&-container {
4343
display: inline-block;
4444
padding: 10px 16px;
45-
background: #fff;
4645
border-radius: 2px;
46+
background: #fff;
4747
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
4848
pointer-events: all;
4949
&-content {
50-
width: 100%;
5150
display: flex;
5251
align-items: center;
52+
width: 100%;
5353
}
5454

5555
&.r-message-success {

‎lib/components/sticky/index.tsx

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,55 @@
1-
import React, { useEffect, useState } from 'react'
2-
import { combineClass } from '../../helpers/utils'
3-
import './sticky.scss'
1+
import React, {useEffect, useState} from 'react';
2+
import {combineClass} from '../../helpers/utils';
3+
import './sticky.scss';
44

55
interface StickyProps extends React.HTMLAttributes<HTMLDivElement> {
66
distance?: number
77
}
88

99
const Sticky: React.FC<StickyProps> = props => {
10-
const { className, distance, children, ...restProps } = props
11-
const stickyWrapper = React.createRef<HTMLDivElement>()
12-
const container = React.createRef<HTMLDivElement>()
13-
const [top, setTop] = useState(0)
10+
const {className, distance, children, ...restProps} = props;
11+
const stickyWrapper = React.createRef<HTMLDivElement>();
12+
const container = React.createRef<HTMLDivElement>();
13+
const [top, setTop] = useState(0);
1414
const handleScroll = () => {
15-
const stickyCurrent: HTMLDivElement | null = stickyWrapper.current
15+
const stickyCurrent: HTMLDivElement | null = stickyWrapper.current;
1616
if (stickyCurrent) {
1717
if (window.scrollY > top - distance!) {
1818
const {
1919
top,
2020
bottom,
2121
left,
2222
right,
23-
} = stickyCurrent.getBoundingClientRect()
24-
stickyCurrent.style.width = right - left + 'px'
25-
stickyCurrent.style.height = bottom - top + 'px'
23+
} = stickyCurrent.getBoundingClientRect();
24+
stickyCurrent.style.width = right - left + 'px';
25+
stickyCurrent.style.height = bottom - top + 'px';
2626
container &&
27-
container.current &&
28-
(container.current.style.height = stickyCurrent.style.height)
29-
stickyCurrent.style.left = left + 'px'
30-
stickyCurrent.style.top = distance + 'px'
31-
stickyCurrent.style.position = 'fixed'
27+
container.current &&
28+
(container.current.style.height = stickyCurrent.style.height);
29+
stickyCurrent.style.left = left + 'px';
30+
stickyCurrent.style.top = distance + 'px';
31+
stickyCurrent.style.position = 'fixed';
3232
} else {
33-
stickyCurrent.style.position = 'static'
33+
stickyCurrent.style.position = 'static';
3434
}
3535
}
36-
}
36+
};
3737
const init = () => {
38-
const stickyCurrent = stickyWrapper.current
38+
const stickyCurrent = stickyWrapper.current;
3939
if (stickyCurrent) {
4040
if (window.scrollY === 0) {
41-
setTop(stickyCurrent.getBoundingClientRect().top)
41+
setTop(stickyCurrent.getBoundingClientRect().top);
4242
} else {
43-
window.scrollTo(window.scrollX, 0)
44-
setTop(stickyCurrent.getBoundingClientRect().top)
43+
window.scrollTo(window.scrollX, 0);
44+
setTop(stickyCurrent.getBoundingClientRect().top);
4545
}
4646
}
47-
}
47+
};
4848
useEffect(() => {
49-
window.addEventListener('scroll', handleScroll)
50-
init()
51-
return () => window.removeEventListener('scroll', handleScroll)
52-
})
49+
window.addEventListener('scroll', handleScroll);
50+
init();
51+
return () => window.removeEventListener('scroll', handleScroll);
52+
});
5353
return (
5454
<div className="r-sticky" ref={container}>
5555
<div
@@ -60,10 +60,10 @@ const Sticky: React.FC<StickyProps> = props => {
6060
{children}
6161
</div>
6262
</div>
63-
)
64-
}
63+
);
64+
};
6565
Sticky.defaultProps = {
6666
distance: 0,
67-
}
68-
Sticky.displayName = 'Sticky'
69-
export default Sticky
67+
};
68+
Sticky.displayName = 'Sticky';
69+
export default Sticky;

0 commit comments

Comments
 (0)