wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Hacking on example components and crap

Browse source
This commit is contained in:
Adam Wathan 2017-08-18 12:46:57 -04:00
parent 959b57199e
commit 0b71c16d21
32 changed files with 126 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/colors.less
View file

@ -19,12 +19,12 @@
@color-orange-dark: #f29900;
@color-orange: #ffc247;
@color-orange-light: #ffd685;
@color-orange-lighter: #fff8eb;
@color-orange-lightest: #fff8eb;
@color-yellow-dark: #ffc400;
@color-yellow: #ffe14a;
@color-yellow-light: #fff0a6;
@color-yellow-lighter: #fff8d6;
@color-yellow-lightest: #fff8d6;
@color-green-dark: #34ae4c;
@color-green: #57d06f;

8
src/utilities/backgrounds.less
View file

@ -55,3 +55,11 @@
.define-bg-colors(@bg-colors; @screens);
.define-bg-hover-colors(@bg-colors; @screens);
.bg-cover { background-size: cover; }
.bg-contain { background-size: contain; }
.responsive({
&bg-cover { .bg-cover; }
&bg-contain { .bg-contain; }
});

10
src/utilities/shadows.less
View file

@ -1,9 +1,9 @@
@shadows:
'1' ~"0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)",
'2' ~"0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)",
'3' ~"0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23)",
'4' ~"0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)",
'5' ~"0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22)",
'1' ~"0 1px 3px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.15)",
'2' ~"0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)",
'3' ~"0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)",
'4' ~"0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)",
'5' ~"0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)",
;
.define-shadow-utilities(@shadows; @screens);

14
src/utilities/sizing.less
View file

@ -5,9 +5,17 @@
'4' 1rem,
'6' 1.5rem,
'8' 2rem,
'10' 2.5rem,
'12' 3rem,
'16' 4rem,
'24' 6rem,
'32' 8rem,
'40' 10rem,
'48' 12rem,
'64' 16rem,
'96' 24rem,
'128' 32rem,
'full' 100%,
;
@width-scale: @sizing-scale;
@ -15,3 +23,9 @@
.define-width-utilities(@width-scale; @screens);
.define-height-utilities(@height-scale; @screens);
.fit { max-width: 100%; }
.responsive({
&fit { .fit; }
});