Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- .md-whiteframe-1dp {
- box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
- 0px 1px 1px 0px rgba(0, 0, 0, 0.14),
- 0px 2px 1px -1px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-2dp {
- box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
- 0px 3px 1px -2px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-3dp {
- box-shadow:0px 1px 8px 0px rgba(0, 0, 0, 0.2),
- 0px 3px 4px 0px rgba(0, 0, 0, 0.14),
- 0px 3px 3px -2px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-4dp {
- box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
- 0px 1px 10px 0px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-5dp {
- box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
- 0px 5px 8px 0px rgba(0, 0, 0, 0.14),
- 0px 1px 14px 0px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-6dp {
- box-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
- 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
- 0px 1px 18px 0px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-7dp {
- box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.2),
- 0px 7px 10px 1px rgba(0, 0, 0, 0.14),
- 0px 2px 16px 1px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-8dp {
- box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
- 0px 3px 14px 2px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-9dp {
- box-shadow: 0px 5px 6px -3px rgba(0, 0, 0, 0.2),
- 0px 9px 12px 1px rgba(0, 0, 0, 0.14),
- 0px 3px 16px 2px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-10dp {
- box-shadow: 0px 6px 6px -3px rgba(0, 0, 0, 0.2),
- 0px 10px 14px 1px rgba(0, 0, 0, 0.14),
- 0px 4px 18px 3px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-11dp {
- box-shadow: 0px 6px 7px -4px rgba(0, 0, 0, 0.2),
- 0px 11px 15px 1px rgba(0, 0, 0, 0.14),
- 0px 4px 20px 3px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-12dp {
- box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
- 0px 12px 17px 2px rgba(0, 0, 0, 0.14),
- 0px 5px 22px 4px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-13dp {
- box-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
- 0px 13px 19px 2px rgba(0, 0, 0, 0.14),
- 0px 5px 24px 4px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-14dp {
- box-shadow: 0px 7px 9px -4px rgba(0, 0, 0, 0.2),
- 0px 14px 21px 2px rgba(0, 0, 0, 0.14),
- 0px 5px 26px 4px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-15dp {
- box-shadow: 0px 8px 9px -5px rgba(0, 0, 0, 0.2),
- 0px 15px 22px 2px rgba(0, 0, 0, 0.14),
- 0px 6px 28px 5px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-16dp {
- box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2),
- 0px 16px 24px 2px rgba(0, 0, 0, 0.14),
- 0px 6px 30px 5px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-17dp {
- box-shadow: 0px 8px 11px -5px rgba(0, 0, 0, 0.2),
- 0px 17px 26px 2px rgba(0, 0, 0, 0.14),
- 0px 6px 32px 5px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-18dp {
- box-shadow: 0px 9px 11px -5px rgba(0, 0, 0, 0.2),
- 0px 18px 28px 2px rgba(0, 0, 0, 0.14),
- 0px 7px 34px 6px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-19dp {
- box-shadow: 0px 9px 12px -6px rgba(0, 0, 0, 0.2),
- 0px 19px 29px 2px rgba(0, 0, 0, 0.14),
- 0px 7px 36px 6px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-20dp {
- box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
- 0px 20px 31px 3px rgba(0, 0, 0, 0.14),
- 0px 8px 38px 7px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-21dp {
- box-shadow: 0px 10px 13px -6px rgba(0, 0, 0, 0.2),
- 0px 21px 33px 3px rgba(0, 0, 0, 0.14),
- 0px 8px 40px 7px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-22dp {
- box-shadow: 0px 10px 14px -6px rgba(0, 0, 0, 0.2),
- 0px 22px 35px 3px rgba(0, 0, 0, 0.14),
- 0px 8px 42px 7px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-23dp {
- box-shadow: 0px 11px 14px -7px rgba(0, 0, 0, 0.2),
- 0px 23px 36px 3px rgba(0, 0, 0, 0.14),
- 0px 9px 44px 8px rgba(0, 0, 0, 0.12); }
- .md-whiteframe-24dp {
- box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2),
- 0px 24px 38px 3px rgba(0, 0, 0, 0.14),
- 0px 9px 46px 8px rgba(0, 0, 0, 0.12); }
- function getShadow(object, dp)
- {
- if (dp <= 0)
- {
- panel.style.boxShadow = "none";
- return;
- }
- panel.style.boxShadow = "0px " + dp + "px " + dp + "px " + "rgba(0, 0, 0, .38)";
- }
- function applyShadow(element, dp)
- {
- if (dp == 0)
- {
- element.style.boxShadow = "none";
- }
- else
- {
- var shadow = "0px ";
- var ambientY = dp;
- var ambientBlur = dp == 1 ? 3 : dp * 2;
- var ambientAlpha = (dp + 10 + (dp / 9.38)) / 100;
- shadow += ambientY + "px " + ambientBlur + "px rgba(0, 0, 0, " + ambientAlpha + "), 0px ";
- var directY = (dp < 10 ? (dp % 2 == 0 ? dp - ((dp / 2) - 1) : (dp - ((dp - 1) / 2))) : dp - 4);
- var directBlur = dp == 1 ? 3 : dp * 2;
- var directAlpha = (24 - Math.round(dp / 10)) / 100;
- shadow += directY + "px " + directBlur + "px rgba(0, 0, 0, " + directAlpha + ")";
- element.style.boxShadow = shadow;
- }
- }
- elevation(dp)
- if dp == 0
- box-shadow none
- else
- dp = unit(dp, px)
- blur = (dp == 1 ? 3 : dp * 2)
- amba = (dp + 10 + (dp / 9.38)) / 100
- diry = (dp < 10 ? (dp % 2 == 0 ? dp - ((dp / 2) - 1) : (dp - ((dp - 1) / 2))) : dp - 4)
- dira = (24 - (round(dp / 10))) / 100
- box-shadow 0px dp blur rgba(0, 0, 0, amba), 0px diry blur rgba(0, 0, 0, dira)
- .shadow--2dp {
- box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
- }
- .shadow--3dp {
- box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
- }
- .shadow--4dp {
- box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
- }
- .shadow--6dp {
- box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
- }
- .shadow--8dp {
- box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2);
- }
- .shadow--16dp {
- box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
- }
- .shadow--24dp {
- box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
- }
- @mixin shadow($dp: 1) {
- @if $dp == 0 { box-shadow: none; }
- @else {
- $blur: if($dp == 1, 3, $dp * 2);
- $amba: ($dp + 11) / 100;
- $diry: $dp - floor($dp / 4);
- $dirb: floor(($dp + 5) / 2);
- $dira: (24 - (round($dp / 10))) / 100;
- box-shadow: 0px #{$dp + 'px'} #{$blur + 'px'} rgba(0, 0, 0, $amba), 0px #{$diry + 'px'} #{$dirb + 'px'} rgba(0, 0, 0, $dira);
- }
- }
Add Comment
Please, Sign In to add comment