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

Add basic inner box shadow (need Steve to improve)

Browse source
This commit is contained in:
Adam Wathan 2017-10-13 10:49:25 -04:00
parent 7d785bf519
commit 56c51e88db
4 changed files with 42 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

20
dist/tailwind.css vendored
View file

@ -2973,6 +2973,10 @@ button,
box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11);
}
.shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.flex {
display: flex;
}
@ -5579,6 +5583,10 @@ button,
box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11);
}
.sm\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.sm\:flex {
display: flex;
}
@ -8186,6 +8194,10 @@ button,
box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11);
}
.md\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.md\:flex {
display: flex;
}
@ -10793,6 +10805,10 @@ button,
box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11);
}
.lg\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.lg\:flex {
display: flex;
}
@ -13400,6 +13416,10 @@ button,
box-shadow: 0 19px 38px rgba(0, 0, 0, .18), 0 15px 12px rgba(0, 0, 0, .11);
}
.xl\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.xl\:flex {
display: flex;
}

2
dist/tailwind.css.map vendored
View file

File diff suppressed because one or more lines are too long

42
docs/source/styles/shadows.md
View file

@ -5,39 +5,37 @@ title: "Shadows"
# Shadows
<div class="subnav">
<a class="subnav-link" href="#usage">Usage</a>
<a class="subnav-link" href="#responsive">Responsive</a>
<a class="subnav-link" href="#customizing">Customizing</a>
</div>
## Usage
Box shadows can be applied using the shadow utilities. By default these are a linear scale, where the lower values represent smaller (shallow) shadows, and higher values represent bigger (deeper) shadows.
<div class="flex text-sm my-6">
<div class="mr-3 p-4 shadow-inner">.shadow-inner</div>
<div class="mr-3 p-4 shadow-1">.shadow-1</div>
<div class="mr-3 p-4 shadow-2">.shadow-2</div>
<div class="p-4 shadow-3">.shadow-3</div>
<div class="mr-3 p-4 shadow-3">.shadow-3</div>
<div class="mr-3 p-4 shadow-4">.shadow-4</div>
<div class="mr-3 p-4 shadow-5">.shadow-5</div>
</div>
<div>
</div>
```html
<div class="shadow-inner"></div>
<div class="shadow-1"></div>
<div class="shadow-2"></div>
<div class="shadow-3"></div>
<div class="shadow-4"></div>
<div class="shadow-5"></div>
```
```less
div {
.shadow-1;
.shadow-2;
.shadow-3;
}
```
## Responsive
### Customizing shadows
You can customize the shadow utilities using the `@shadows` variable. Please note that the entire scale must be redefined. It's not possible to add a new value to the existing scale. Shadows can be defined with multiple `box-shadow` values, as illustrated below.
```less
// The default shadows scale
@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)",
;
```
## Customizing

1
src/defaultConfig.js
View file

@ -369,6 +369,7 @@ export default {
'3': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
'4': '0 14px 28px rgba(0,0,0,.16), 0 10px 10px rgba(0,0,0,.11)',
'5': '0 19px 38px rgba(0,0,0,.18), 0 15px 12px rgba(0,0,0,.11)',
'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
},
zIndex: {
'0': 0,