Skip to content

Commit 832e1f7

Browse files
IdenPinIdenPin
committed
增加 width, shadow, font
1 parent ec67f4c commit 832e1f7

File tree

8 files changed

+1378
-997
lines changed

8 files changed

+1378
-997
lines changed

‎dist/acss-helper.css‎

Lines changed: 608 additions & 476 deletions
Large diffs are not rendered by default.

‎docs/css/acss-helper.css‎

Lines changed: 608 additions & 476 deletions
Large diffs are not rendered by default.

‎src/_border.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717

1818
// border-style
1919
@each $styleKey, $styleVal in $border-style {
20-
.border-style{
20+
.border-#{$styleKey}{
2121
border-style: $styleVal;
2222
}
2323
}
@@ -33,4 +33,5 @@
3333
border-style: $colorVal;
3434
}
3535
}
36-
}
36+
}
37+

‎src/_font.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
// font-size
2+
@each $key, $val in $font-size {
3+
.text-#{$key} {
4+
font-size: $val;
5+
}
6+
}
7+
8+
// font-weight
9+
@each $key, $val in $font-weight {
10+
.font-#{$key} {
11+
font-weight: $val;
12+
}
13+
}
14+
15+
// line-height
16+
@each $key, $val in $line-height {
17+
.line-#{$key} {
18+
line-height: $val;
19+
}
20+
}
21+
22+

‎src/_shadow.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@each $key, $val in $shadow {
2+
.shadow-#{$key} {
3+
box-shadow: unquote($val);
4+
}
5+
}

‎src/_variables.scss‎

Lines changed: 123 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -119,53 +119,48 @@ $colors: (
119119
);
120120

121121

122+
$direction: (
123+
t: left,
124+
r: right,
125+
b: bottom,
126+
l: left
127+
);
128+
129+
122130
// --------------------------------------------------
123131
// Variables spacing
124132
// --------------------------------------------------
125133
// base space number
126134
$spacing-sizes: (
127-
px: '1px',
128-
'0': '0',
129-
'1': '0.25rem',
130-
'2': '0.5rem',
131-
'3': '0.75rem',
132-
'4': '1rem',
133-
'5': '1.25rem',
134-
'6': '1.5rem',
135-
'8': '2rem',
136-
'10': '2.5rem',
137-
'12': '3rem',
138-
'16': '4rem',
139-
'20': '5rem',
140-
'24': '6rem',
141-
'32': '8rem',
142-
'40': '10rem',
143-
'48': '12rem',
144-
'56': '14rem',
145-
'64': '16rem',
146-
'-px': '-1px',
147-
'-1': '-0.25rem',
148-
'-2': '-0.5rem',
149-
'-3': '-0.75rem',
150-
'-4': '-1rem',
151-
'-5': '-1.25rem',
152-
);
153-
154-
// space direction
155-
$spacing-direction: (
156-
t:left,
157-
r: right,
158-
b: bottom,
159-
l: left
135+
px: 1px,
136+
'0': 0,
137+
'1': 0.25rem,
138+
'2': 0.5rem,
139+
'3': 0.75rem,
140+
'4': 1rem,
141+
'5': 1.25rem,
142+
'6': 1.5rem,
143+
'8': 2rem,
144+
'10': 2.5rem,
145+
'12': 3rem,
146+
'16': 4rem,
147+
'20': 5rem,
148+
'24': 6rem,
149+
'32': 8rem,
150+
'40': 10rem,
151+
'48': 12rem,
152+
'56': 14rem,
153+
'64': 16rem,
154+
'-px': -1px,
155+
'-1': -0.25rem,
156+
'-2': -0.5rem,
157+
'-3': -0.75rem,
158+
'-4': -1rem,
159+
'-5': -1.25rem,
160160
);
161161

162162
// space direction
163-
$direction: (
164-
t:left,
165-
r: right,
166-
b: bottom,
167-
l: left
168-
);
163+
$spacing-direction: $direction !default;
169164

170165
// space key
171166
$spacing-types: (
@@ -181,14 +176,100 @@ $spacing-types: (
181176
// border with
182177
$border-color: $colors !default;
183178
$border-width: (
179+
default: 1,
184180
0: 0,
185-
1: 1,
186181
2: 2,
187182
4: 4,
188-
5: 5,
183+
8: 8,
189184
);
190185

191186
$border-style: (
192187
solid: solid,
193188
dashed: dashed
194-
);
189+
);
190+
191+
192+
// --------------------------------------------------
193+
// Variables shadow
194+
// --------------------------------------------------
195+
$shadow: (
196+
default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
197+
md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
198+
lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
199+
xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
200+
2xl: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
201+
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
202+
outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
203+
none: 'none',
204+
);
205+
206+
// --------------------------------------------------
207+
// Variables font
208+
// --------------------------------------------------
209+
$font-size: (
210+
xs: 0.75rem,
211+
sm: 0.875rem,
212+
base: 1rem,
213+
lg: 1.125rem,
214+
xl: 1.25rem,
215+
'2xl': 1.5rem,
216+
'3xl': 1.875rem,
217+
'4xl': 2.25rem,
218+
'5xl': 3rem,
219+
'6xl': 4rem,
220+
);
221+
222+
$font-weight: (
223+
hairline: 100,
224+
thin: 200,
225+
light: 300,
226+
normal: 400,
227+
medium: 500,
228+
semibold: 600,
229+
bold: 700,
230+
extrabold: 800,
231+
black: 900,
232+
);
233+
234+
$line-height: (
235+
none: '1',
236+
tight: '1.25',
237+
snug: '1.375',
238+
normal: '1.5',
239+
relaxed: '1.625',
240+
loose: '2',
241+
);
242+
243+
244+
// --------------------------------------------------
245+
// Variables font
246+
// --------------------------------------------------
247+
$width: (
248+
'1/2': '50%',
249+
'1/3': '33.333333%',
250+
'2/3': '66.666667%',
251+
'1/4': '25%',
252+
'2/4': '50%',
253+
'3/4': '75%',
254+
'1/5': '20%',
255+
'2/5': '40%',
256+
'3/5': '60%',
257+
'4/5': '80%',
258+
'1/6': '16.666667%',
259+
'2/6': '33.333333%',
260+
'3/6': '50%',
261+
'4/6': '66.666667%',
262+
'5/6': '83.333333%',
263+
'1/12': '8.333333%',
264+
'2/12': '16.666667%',
265+
'3/12': '25%',
266+
'4/12': '33.333333%',
267+
'5/12': '41.666667%',
268+
'6/12': '50%',
269+
'7/12': '58.333333%',
270+
'8/12': '66.666667%',
271+
'9/12': '75%',
272+
'10/12': '83.333333%',
273+
'11/12': '91.666667%',
274+
)
275+

‎src/_width.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// @each $key, $val in $width {
2+
// .#{$key} {
3+
// width: $val;
4+
// }
5+
// }

‎src/helper.scss‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
@import './variables.scss';
22
@import './flex.scss';
33
@import './border';
4-
@import './spacing';
4+
@import './spacing';
5+
@import './shadow';
6+
@import './font';
7+
@import './width';

0 commit comments

Comments
 (0)