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

Update default shadows

Browse source
This commit is contained in:
Jonathan Reinink 2017-10-31 15:16:51 -04:00
parent 546566a7f8
commit a01f57c3bd
3 changed files with 32 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

40
__tests__/fixtures/tailwind.css
View file

@ -3371,19 +3371,19 @@ button,
}
.shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
}
.shadow-md {
box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
.shadow-lg {
box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13);
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
}
.shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
.shadow-none {
@ -6449,19 +6449,19 @@ button,
}
.sm\:shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
}
.sm\:shadow-md {
box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
.sm\:shadow-lg {
box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13);
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
}
.sm\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
.sm\:shadow-none {
@ -9528,19 +9528,19 @@ button,
}
.md\:shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
}
.md\:shadow-md {
box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
.md\:shadow-lg {
box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13);
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
}
.md\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
.md\:shadow-none {
@ -12607,19 +12607,19 @@ button,
}
.lg\:shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
}
.lg\:shadow-md {
box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
.lg\:shadow-lg {
box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13);
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
}
.lg\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
.lg\:shadow-none {
@ -15686,19 +15686,19 @@ button,
}
.xl\:shadow {
box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .15);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
}
.xl\:shadow-md {
box-shadow: 0 3px 6px rgba(0, 0, 0, .12), 0 3px 6px rgba(0, 0, 0, .13);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08);
}
.xl\:shadow-lg {
box-shadow: 0 10px 20px rgba(0, 0, 0, .13), 0 6px 6px rgba(0, 0, 0, .13);
box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08);
}
.xl\:shadow-inner {
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}
.xl\:shadow-none {

8
defaultConfig.js
View file

@ -708,10 +708,10 @@ module.exports = {
*/
shadows: {
default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
'lg': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
default: '0 2px 4px 0 rgba(0,0,0,0.10)',
'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
'none': 'none',
},

16
docs/source/docs/shadows.blade.md
View file

@ -33,22 +33,22 @@ title: "Shadows"
<tbody class="align-baseline">
<tr>
<td class="p-2 border-t border-smoke font-mono text-xs text-purple-dark">.shadow</td>
<td class="w-2/5 p-2 border-t border-smoke font-mono text-xs text-blue-dark">box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15);</td>
<td class="p-2 border-t border-smoke font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 2px 4px 0 rgba(0,0,0,0.10)</span>;</td>
<td class="p-2 border-t border-smoke text-sm text-grey-darker">Apply a small box shadow to an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-md</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: 0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13);</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 4px 8px 0 rgba(0,0,0,0.12),</span> <span class="whitespace-no-wrap">0 2px 4px 0 rgba(0,0,0,0.08);</span></td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a medium box shadow to an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-lg</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: 0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13);</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">0 15px 30px 0 rgba(0,0,0,0.11),</span> <span class="whitespace-no-wrap">0 5px 15px 0 rgba(0,0,0,0.08);</span></td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a large box shadow to an element.</td>
</tr>
<tr>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-purple-dark">.shadow-inner</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05)</td>
<td class="p-2 border-t border-smoke-light font-mono text-xs text-blue-dark">box-shadow: <span class="whitespace-no-wrap">inset 0 2px 4px 0 rgba(0,0,0,0.06);</span></td>
<td class="p-2 border-t border-smoke-light text-sm text-grey-darker">Apply a small inner box shadow to an element.</td>
</tr>
<tr>
@ -147,10 +147,10 @@ By default Tailwind provides three drop shadow utilities, one inner shadow utili
If a `default` shadow is provided, it will be used for the non-suffixed `.shadow` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.shadow-2` utility.
@component('_partials.customized-config', ['key' => 'shadows'])
- default: '0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.15)',
- 'md': '0 3px 6px rgba(0,0,0,.12), 0 3px 6px rgba(0,0,0,.13)',
- 'lg': '0 10px 20px rgba(0,0,0,.13), 0 6px 6px rgba(0,0,0,.13)',
- 'inner': 'inset 0 1px 2px rgba(0, 0, 0, 0.05)',
- default: '0 2px 4px 0 rgba(0,0,0,0.10)',
- 'md': '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08)',
- 'lg': '0 15px 30px 0 rgba(0,0,0,0.11), 0 5px 15px 0 rgba(0,0,0,0.08)',
- 'inner': 'inset 0 2px 4px 0 rgba(0,0,0,0.06)',
+ '1': '0 2px 4px rgba(0,0,0,0.05)',
+ '2': '0 4px 8px rgba(0,0,0,0.1)',
+ '3': '0 8px 16px rgba(0,0,0,0.15)',