Last active
March 22, 2018 11:36
-
-
Save pongstr/b4e838ec8b97c54b1334 to your computer and use it in GitHub Desktop.
CSS Ribbons
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| * CSS3 Ribbons by @pongstr | |
| * http://codepen.io/pongstr/pen/jxhbu | |
| */ | |
| body,html{height:100%;font-family:"Helvetica Neue",Helvetica,sans-serif}*,:after,:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}.container{margin-left:auto;margin-right:auto;padding-left:15px;padding-right:15px}@media (min-width:768px){.container{width:768px}}@media (min-width:992px){.container{width:992px}}@media (min-width:1200px){.container{width:1200px}}h1{display:block;clear:both;width:96%;margin:25px auto;font-family:Pacifico,cursive;font-size:64px;font-weight:700;text-align:center;background:-webkit-linear-gradient(#5bc0de,#428bca);-webkit-background-clip:text;-webkit-text-fill-color:transparent}pre{position:relative;margin:15px auto;padding:10px;font-family:Consolas,Menlo,Courier,monsopace;font-size:13px;line-height:1.5;border:1px solid #ddd;background-color:#f4f4f4;border-radius:4px;box-shadow:0 0 5px rgba(51,51,51,.1)inset}@media (min-width:480px){pre{float:left;width:100%}}@media (min-width:768px){pre{float:left;width:100%}}@media (min-width:992px),(min-width:1200px){pre{float:none;clear:both;width:50%}}code{display:inline-block;margin:15px auto;padding:5px 10px;font-size:13px;font-weight:700;text-shadow:0 1px 0 #fff;background-color:#eee;border:1px solid #ddd;border-radius:3px}ul.thumbnails{margin:0;padding:0;list-style:none}ul.thumbnails:after,ul.thumbnails:before{display:table;content:" "}ul.thumbnails:after{clear:both}@media (min-width:768px){ul.thumbnails{margin-left:-15px;margin-right:-15px}}ul.thumbnails>li{position:relative;padding-left:15px;padding-right:15px;text-align:center;border-left:1px solid #fff;cursor:pointer}@media (min-width:480px){ul.thumbnails>li{float:left;width:50%}}@media (min-width:768px){ul.thumbnails>li{float:left;width:33.33333%}}@media (min-width:992px){ul.thumbnails>li{float:left;width:25%}}@media (min-width:1200px){ul.thumbnails>li{float:left;width:33.33333%}}ul.thumbnails>li:nth-of-type(1){color:#000}ul.thumbnails>li:nth-of-type(2){color:#428bca}ul.thumbnails>li:nth-of-type(3){color:#5cb85c}ul.thumbnails>li:nth-of-type(4){color:#5bc0de}ul.thumbnails>li:nth-of-type(5){color:#f0ad4e}ul.thumbnails>li:nth-of-type(6){color:#d9534f}.content{-moz-transition:all .2s ease-in;-o-transition:all .2s ease-in;-webkit-transition:all .2s ease-in;transition:all .2s ease-in;position:relative;margin:15px 0;background-color:#fff;border:1px solid #ddd;border-radius:3px}.content:hover{-moz-transition:all .2s ease-out;-o-transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transition:all .2s ease-out;-moz-transform:scale(1.3,1.3);-ms-transform:scale(1.3,1.3);-webkit-transform:scale(1.3,1.3);transform:scale(1.3,1.3);-moz-box-shadow:0 0 20px rgba(0,0,0,.2);-webkit-box-shadow:0 0 20px rgba(0,0,0,.2);box-shadow:0 0 20px rgba(0,0,0,.2);position:relative;z-index:500}@media (min-width:1200px){.content{min-height:260px}}.content .icon{display:table;width:100%;height:270px;text-align:center}.content .icon>.fa{display:table-cell;height:100%;vertical-align:middle}.ribbon{position:absolute;z-index:100;width:120px;height:120px;overflow:hidden}.ribbon.top-right{top:-3px;right:-6px}.ribbon.top-right.ribbon-default>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF4F4F4', endColorstr='#FFDDDDDD');background-image:-moz-linear-gradient(top,#f4f4f4 0,#ddd 100%);background-image:-webkit-linear-gradient(top,#f4f4f4 0,#ddd 100%);background-image:linear-gradient(to bottom,#f4f4f4 0,#ddd 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #cecece;font-weight:700;font-size:65%;color:#000;background-color:#f4f4f4;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:27px}.ribbon.top-right.ribbon-default>small:after,.ribbon.top-right.ribbon-default>small:before{position:absolute;content:" "}.ribbon.top-right.ribbon-default>small:before{left:0}.ribbon.top-right.ribbon-default>small:after{right:0}.ribbon.top-right.ribbon-default>small:after,.ribbon.top-right.ribbon-default>small:before{bottom:-3px;border-top:3px solid #8e8e8e;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-right.ribbon-primary>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF428BCA', endColorstr='#FF2A6496');background-image:-moz-linear-gradient(top,#428bca 0,#2a6496 100%);background-image:-webkit-linear-gradient(top,#428bca 0,#2a6496 100%);background-image:linear-gradient(to bottom,#428bca 0,#2a6496 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #2a6496;font-weight:700;font-size:65%;color:#fff;background-color:#428bca;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:27px}.ribbon.top-right.ribbon-primary>small:after,.ribbon.top-right.ribbon-primary>small:before{position:absolute;content:" "}.ribbon.top-right.ribbon-primary>small:before{left:0}.ribbon.top-right.ribbon-primary>small:after{right:0}.ribbon.top-right.ribbon-primary>small:after,.ribbon.top-right.ribbon-primary>small:before{bottom:-3px;border-top:3px solid #0e2132;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-right.ribbon-success>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5CB85C', endColorstr='#FF3D8B3D');background-image:-moz-linear-gradient(top,#5cb85c 0,#3d8b3d 100%);background-image:-webkit-linear-gradient(top,#5cb85c 0,#3d8b3d 100%);background-image:linear-gradient(to bottom,#5cb85c 0,#3d8b3d 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #3d8b3d;font-weight:700;font-size:65%;color:#fff;background-color:#5cb85c;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:27px}.ribbon.top-right.ribbon-success>small:after,.ribbon.top-right.ribbon-success>small:before{position:absolute;content:" "}.ribbon.top-right.ribbon-success>small:before{left:0}.ribbon.top-right.ribbon-success>small:after{right:0}.ribbon.top-right.ribbon-success>small:after,.ribbon.top-right.ribbon-success>small:before{bottom:-3px;border-top:3px solid #163216;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-right.ribbon-info>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5BC0DE', endColorstr='#FF28A1C5');background-image:-moz-linear-gradient(top,#5bc0de 0,#28a1c5 100%);background-image:-webkit-linear-gradient(top,#5bc0de 0,#28a1c5 100%);background-image:linear-gradient(to bottom,#5bc0de 0,#28a1c5 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #28a1c5;font-weight:700;font-size:65%;color:#fff;background-color:#5bc0de;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:27px}.ribbon.top-right.ribbon-info>small:after,.ribbon.top-right.ribbon-info>small:before{position:absolute;content:" "}.ribbon.top-right.ribbon-info>small:before{left:0}.ribbon.top-right.ribbon-info>small:after{right:0}.ribbon.top-right.ribbon-info>small:after,.ribbon.top-right.ribbon-info>small:before{bottom:-3px;border-top:3px solid #124a5b;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-right.ribbon-warning>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF0AD4E', endColorstr='#FFDF8A13');background-image:-moz-linear-gradient(top,#f0ad4e 0,#df8a13 100%);background-image:-webkit-linear-gradient(top,#f0ad4e 0,#df8a13 100%);background-image:linear-gradient(to bottom,#f0ad4e 0,#df8a13 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #df8a13;font-weight:700;font-size:65%;color:#fff;background-color:#f0ad4e;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:27px}.ribbon.top-right.ribbon-warning>small:after,.ribbon.top-right.ribbon-warning>small:before{position:absolute;content:" "}.ribbon.top-right.ribbon-warning>small:before{left:0}.ribbon.top-right.ribbon-warning>small:after{right:0}.ribbon.top-right.ribbon-warning>small:after,.ribbon.top-right.ribbon-warning>small:before{bottom:-3px;border-top:3px solid #694109;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-right.ribbon-danger>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD9534F', endColorstr='#FFB52B27');background-image:-moz-linear-gradient(top,#d9534f 0,#b52b27 100%);background-image:-webkit-linear-gradient(top,#d9534f 0,#b52b27 100%);background-image:linear-gradient(to bottom,#d9534f 0,#b52b27 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #b52b27;font-weight:700;font-size:65%;color:#fff;background-color:#d9534f;-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:27px}.ribbon.top-right.ribbon-danger>small:after,.ribbon.top-right.ribbon-danger>small:before{position:absolute;content:" "}.ribbon.top-right.ribbon-danger>small:before{left:0}.ribbon.top-right.ribbon-danger>small:after{right:0}.ribbon.top-right.ribbon-danger>small:after,.ribbon.top-right.ribbon-danger>small:before{bottom:-3px;border-top:3px solid #4c1210;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-left{top:-3px;left:-6px}.ribbon.top-left.ribbon-default>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF4F4F4', endColorstr='#FFDDDDDD');background-image:-moz-linear-gradient(top,#f4f4f4 0,#ddd 100%);background-image:-webkit-linear-gradient(top,#f4f4f4 0,#ddd 100%);background-image:linear-gradient(to bottom,#f4f4f4 0,#ddd 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #cecece;font-weight:700;font-size:65%;color:#000;background-color:#f4f4f4;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:-27px}.ribbon.top-left.ribbon-default>small:after,.ribbon.top-left.ribbon-default>small:before{position:absolute;content:" "}.ribbon.top-left.ribbon-default>small:before{left:0}.ribbon.top-left.ribbon-default>small:after{right:0}.ribbon.top-left.ribbon-default>small:after,.ribbon.top-left.ribbon-default>small:before{bottom:-3px;border-top:3px solid #8e8e8e;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-left.ribbon-primary>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF428BCA', endColorstr='#FF2A6496');background-image:-moz-linear-gradient(top,#428bca 0,#2a6496 100%);background-image:-webkit-linear-gradient(top,#428bca 0,#2a6496 100%);background-image:linear-gradient(to bottom,#428bca 0,#2a6496 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #2a6496;font-weight:700;font-size:65%;color:#fff;background-color:#428bca;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:-27px}.ribbon.top-left.ribbon-primary>small:after,.ribbon.top-left.ribbon-primary>small:before{position:absolute;content:" "}.ribbon.top-left.ribbon-primary>small:before{left:0}.ribbon.top-left.ribbon-primary>small:after{right:0}.ribbon.top-left.ribbon-primary>small:after,.ribbon.top-left.ribbon-primary>small:before{bottom:-3px;border-top:3px solid #0e2132;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-left.ribbon-success>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5CB85C', endColorstr='#FF3D8B3D');background-image:-moz-linear-gradient(top,#5cb85c 0,#3d8b3d 100%);background-image:-webkit-linear-gradient(top,#5cb85c 0,#3d8b3d 100%);background-image:linear-gradient(to bottom,#5cb85c 0,#3d8b3d 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #3d8b3d;font-weight:700;font-size:65%;color:#fff;background-color:#5cb85c;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:-27px}.ribbon.top-left.ribbon-success>small:after,.ribbon.top-left.ribbon-success>small:before{position:absolute;content:" "}.ribbon.top-left.ribbon-success>small:before{left:0}.ribbon.top-left.ribbon-success>small:after{right:0}.ribbon.top-left.ribbon-success>small:after,.ribbon.top-left.ribbon-success>small:before{bottom:-3px;border-top:3px solid #163216;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-left.ribbon-info>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5BC0DE', endColorstr='#FF28A1C5');background-image:-moz-linear-gradient(top,#5bc0de 0,#28a1c5 100%);background-image:-webkit-linear-gradient(top,#5bc0de 0,#28a1c5 100%);background-image:linear-gradient(to bottom,#5bc0de 0,#28a1c5 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #28a1c5;font-weight:700;font-size:65%;color:#fff;background-color:#5bc0de;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:-27px}.ribbon.top-left.ribbon-info>small:after,.ribbon.top-left.ribbon-info>small:before{position:absolute;content:" "}.ribbon.top-left.ribbon-info>small:before{left:0}.ribbon.top-left.ribbon-info>small:after{right:0}.ribbon.top-left.ribbon-info>small:after,.ribbon.top-left.ribbon-info>small:before{bottom:-3px;border-top:3px solid #124a5b;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-left.ribbon-warning>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF0AD4E', endColorstr='#FFDF8A13');background-image:-moz-linear-gradient(top,#f0ad4e 0,#df8a13 100%);background-image:-webkit-linear-gradient(top,#f0ad4e 0,#df8a13 100%);background-image:linear-gradient(to bottom,#f0ad4e 0,#df8a13 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #df8a13;font-weight:700;font-size:65%;color:#fff;background-color:#f0ad4e;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:-27px}.ribbon.top-left.ribbon-warning>small:after,.ribbon.top-left.ribbon-warning>small:before{position:absolute;content:" "}.ribbon.top-left.ribbon-warning>small:before{left:0}.ribbon.top-left.ribbon-warning>small:after{right:0}.ribbon.top-left.ribbon-warning>small:after,.ribbon.top-left.ribbon-warning>small:before{bottom:-3px;border-top:3px solid #694109;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.top-left.ribbon-danger>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD9534F', endColorstr='#FFB52B27');background-image:-moz-linear-gradient(top,#d9534f 0,#b52b27 100%);background-image:-webkit-linear-gradient(top,#d9534f 0,#b52b27 100%);background-image:linear-gradient(to bottom,#d9534f 0,#b52b27 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #b52b27;font-weight:700;font-size:65%;color:#fff;background-color:#d9534f;-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-webkit-transform:rotate(-45deg);transform:rotate(-45deg);-moz-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 3px 6px -3px rgba(0,0,0,.5);box-shadow:0 3px 6px -3px rgba(0,0,0,.5);top:16px;left:-27px}.ribbon.top-left.ribbon-danger>small:after,.ribbon.top-left.ribbon-danger>small:before{position:absolute;content:" "}.ribbon.top-left.ribbon-danger>small:before{left:0}.ribbon.top-left.ribbon-danger>small:after{right:0}.ribbon.top-left.ribbon-danger>small:after,.ribbon.top-left.ribbon-danger>small:before{bottom:-3px;border-top:3px solid #4c1210;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-right{bottom:-3px;right:-6px}.ribbon.bottom-right.ribbon-default>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF4F4F4', endColorstr='#FFDDDDDD');background-image:-moz-linear-gradient(top,#f4f4f4 0,#ddd 100%);background-image:-webkit-linear-gradient(top,#f4f4f4 0,#ddd 100%);background-image:linear-gradient(to bottom,#f4f4f4 0,#ddd 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #cecece;font-weight:700;font-size:65%;color:#000;background-color:#f4f4f4;-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);transform:rotate(-50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;right:-31px}.ribbon.bottom-right.ribbon-default>small:after,.ribbon.bottom-right.ribbon-default>small:before{position:absolute;content:" "}.ribbon.bottom-right.ribbon-default>small:before{left:0}.ribbon.bottom-right.ribbon-default>small:after{right:0}.ribbon.bottom-right.ribbon-default>small:after,.ribbon.bottom-right.ribbon-default>small:before{top:-3px;border-bottom:3px solid #8e8e8e;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-right.ribbon-primary>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF428BCA', endColorstr='#FF2A6496');background-image:-moz-linear-gradient(top,#428bca 0,#2a6496 100%);background-image:-webkit-linear-gradient(top,#428bca 0,#2a6496 100%);background-image:linear-gradient(to bottom,#428bca 0,#2a6496 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #2a6496;font-weight:700;font-size:65%;color:#fff;background-color:#428bca;-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);transform:rotate(-50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;right:-31px}.ribbon.bottom-right.ribbon-primary>small:after,.ribbon.bottom-right.ribbon-primary>small:before{position:absolute;content:" "}.ribbon.bottom-right.ribbon-primary>small:before{left:0}.ribbon.bottom-right.ribbon-primary>small:after{right:0}.ribbon.bottom-right.ribbon-primary>small:after,.ribbon.bottom-right.ribbon-primary>small:before{top:-3px;border-bottom:3px solid #0e2132;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-right.ribbon-success>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5CB85C', endColorstr='#FF3D8B3D');background-image:-moz-linear-gradient(top,#5cb85c 0,#3d8b3d 100%);background-image:-webkit-linear-gradient(top,#5cb85c 0,#3d8b3d 100%);background-image:linear-gradient(to bottom,#5cb85c 0,#3d8b3d 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #3d8b3d;font-weight:700;font-size:65%;color:#fff;background-color:#5cb85c;-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);transform:rotate(-50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;right:-31px}.ribbon.bottom-right.ribbon-success>small:after,.ribbon.bottom-right.ribbon-success>small:before{position:absolute;content:" "}.ribbon.bottom-right.ribbon-success>small:before{left:0}.ribbon.bottom-right.ribbon-success>small:after{right:0}.ribbon.bottom-right.ribbon-success>small:after,.ribbon.bottom-right.ribbon-success>small:before{top:-3px;border-bottom:3px solid #163216;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-right.ribbon-info>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5BC0DE', endColorstr='#FF28A1C5');background-image:-moz-linear-gradient(top,#5bc0de 0,#28a1c5 100%);background-image:-webkit-linear-gradient(top,#5bc0de 0,#28a1c5 100%);background-image:linear-gradient(to bottom,#5bc0de 0,#28a1c5 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #28a1c5;font-weight:700;font-size:65%;color:#fff;background-color:#5bc0de;-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);transform:rotate(-50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;right:-31px}.ribbon.bottom-right.ribbon-info>small:after,.ribbon.bottom-right.ribbon-info>small:before{position:absolute;content:" "}.ribbon.bottom-right.ribbon-info>small:before{left:0}.ribbon.bottom-right.ribbon-info>small:after{right:0}.ribbon.bottom-right.ribbon-info>small:after,.ribbon.bottom-right.ribbon-info>small:before{top:-3px;border-bottom:3px solid #124a5b;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-right.ribbon-warning>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF0AD4E', endColorstr='#FFDF8A13');background-image:-moz-linear-gradient(top,#f0ad4e 0,#df8a13 100%);background-image:-webkit-linear-gradient(top,#f0ad4e 0,#df8a13 100%);background-image:linear-gradient(to bottom,#f0ad4e 0,#df8a13 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #df8a13;font-weight:700;font-size:65%;color:#fff;background-color:#f0ad4e;-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);transform:rotate(-50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;right:-31px}.ribbon.bottom-right.ribbon-warning>small:after,.ribbon.bottom-right.ribbon-warning>small:before{position:absolute;content:" "}.ribbon.bottom-right.ribbon-warning>small:before{left:0}.ribbon.bottom-right.ribbon-warning>small:after{right:0}.ribbon.bottom-right.ribbon-warning>small:after,.ribbon.bottom-right.ribbon-warning>small:before{top:-3px;border-bottom:3px solid #694109;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-right.ribbon-danger>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD9534F', endColorstr='#FFB52B27');background-image:-moz-linear-gradient(top,#d9534f 0,#b52b27 100%);background-image:-webkit-linear-gradient(top,#d9534f 0,#b52b27 100%);background-image:linear-gradient(to bottom,#d9534f 0,#b52b27 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #b52b27;font-weight:700;font-size:65%;color:#fff;background-color:#d9534f;-moz-transform:rotate(-50deg);-ms-transform:rotate(-50deg);-webkit-transform:rotate(-50deg);transform:rotate(-50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;right:-31px}.ribbon.bottom-right.ribbon-danger>small:after,.ribbon.bottom-right.ribbon-danger>small:before{position:absolute;content:" "}.ribbon.bottom-right.ribbon-danger>small:before{left:0}.ribbon.bottom-right.ribbon-danger>small:after{right:0}.ribbon.bottom-right.ribbon-danger>small:after,.ribbon.bottom-right.ribbon-danger>small:before{top:-3px;border-bottom:3px solid #4c1210;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-left{bottom:-3px;left:-6px}.ribbon.bottom-left.ribbon-default>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF4F4F4', endColorstr='#FFDDDDDD');background-image:-moz-linear-gradient(top,#f4f4f4 0,#ddd 100%);background-image:-webkit-linear-gradient(top,#f4f4f4 0,#ddd 100%);background-image:linear-gradient(to bottom,#f4f4f4 0,#ddd 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #cecece;font-weight:700;font-size:65%;color:#000;background-color:#f4f4f4;-moz-transform:rotate(50deg);-ms-transform:rotate(50deg);-webkit-transform:rotate(50deg);transform:rotate(50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;left:-31px}.ribbon.bottom-left.ribbon-default>small:after,.ribbon.bottom-left.ribbon-default>small:before{position:absolute;content:" "}.ribbon.bottom-left.ribbon-default>small:before{left:0}.ribbon.bottom-left.ribbon-default>small:after{right:0}.ribbon.bottom-left.ribbon-default>small:after,.ribbon.bottom-left.ribbon-default>small:before{top:-3px;border-bottom:3px solid #8e8e8e;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-left.ribbon-primary>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF428BCA', endColorstr='#FF2A6496');background-image:-moz-linear-gradient(top,#428bca 0,#2a6496 100%);background-image:-webkit-linear-gradient(top,#428bca 0,#2a6496 100%);background-image:linear-gradient(to bottom,#428bca 0,#2a6496 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #2a6496;font-weight:700;font-size:65%;color:#fff;background-color:#428bca;-moz-transform:rotate(50deg);-ms-transform:rotate(50deg);-webkit-transform:rotate(50deg);transform:rotate(50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;left:-31px}.ribbon.bottom-left.ribbon-primary>small:after,.ribbon.bottom-left.ribbon-primary>small:before{position:absolute;content:" "}.ribbon.bottom-left.ribbon-primary>small:before{left:0}.ribbon.bottom-left.ribbon-primary>small:after{right:0}.ribbon.bottom-left.ribbon-primary>small:after,.ribbon.bottom-left.ribbon-primary>small:before{top:-3px;border-bottom:3px solid #0e2132;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-left.ribbon-success>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5CB85C', endColorstr='#FF3D8B3D');background-image:-moz-linear-gradient(top,#5cb85c 0,#3d8b3d 100%);background-image:-webkit-linear-gradient(top,#5cb85c 0,#3d8b3d 100%);background-image:linear-gradient(to bottom,#5cb85c 0,#3d8b3d 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #3d8b3d;font-weight:700;font-size:65%;color:#fff;background-color:#5cb85c;-moz-transform:rotate(50deg);-ms-transform:rotate(50deg);-webkit-transform:rotate(50deg);transform:rotate(50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;left:-31px}.ribbon.bottom-left.ribbon-success>small:after,.ribbon.bottom-left.ribbon-success>small:before{position:absolute;content:" "}.ribbon.bottom-left.ribbon-success>small:before{left:0}.ribbon.bottom-left.ribbon-success>small:after{right:0}.ribbon.bottom-left.ribbon-success>small:after,.ribbon.bottom-left.ribbon-success>small:before{top:-3px;border-bottom:3px solid #163216;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-left.ribbon-info>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF5BC0DE', endColorstr='#FF28A1C5');background-image:-moz-linear-gradient(top,#5bc0de 0,#28a1c5 100%);background-image:-webkit-linear-gradient(top,#5bc0de 0,#28a1c5 100%);background-image:linear-gradient(to bottom,#5bc0de 0,#28a1c5 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #28a1c5;font-weight:700;font-size:65%;color:#fff;background-color:#5bc0de;-moz-transform:rotate(50deg);-ms-transform:rotate(50deg);-webkit-transform:rotate(50deg);transform:rotate(50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;left:-31px}.ribbon.bottom-left.ribbon-info>small:after,.ribbon.bottom-left.ribbon-info>small:before{position:absolute;content:" "}.ribbon.bottom-left.ribbon-info>small:before{left:0}.ribbon.bottom-left.ribbon-info>small:after{right:0}.ribbon.bottom-left.ribbon-info>small:after,.ribbon.bottom-left.ribbon-info>small:before{top:-3px;border-bottom:3px solid #124a5b;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-left.ribbon-warning>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF0AD4E', endColorstr='#FFDF8A13');background-image:-moz-linear-gradient(top,#f0ad4e 0,#df8a13 100%);background-image:-webkit-linear-gradient(top,#f0ad4e 0,#df8a13 100%);background-image:linear-gradient(to bottom,#f0ad4e 0,#df8a13 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #df8a13;font-weight:700;font-size:65%;color:#fff;background-color:#f0ad4e;-moz-transform:rotate(50deg);-ms-transform:rotate(50deg);-webkit-transform:rotate(50deg);transform:rotate(50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;left:-31px}.ribbon.bottom-left.ribbon-warning>small:after,.ribbon.bottom-left.ribbon-warning>small:before{position:absolute;content:" "}.ribbon.bottom-left.ribbon-warning>small:before{left:0}.ribbon.bottom-left.ribbon-warning>small:after{right:0}.ribbon.bottom-left.ribbon-warning>small:after,.ribbon.bottom-left.ribbon-warning>small:before{top:-3px;border-bottom:3px solid #694109;border-left:3px solid transparent;border-right:3px solid transparent}.ribbon.bottom-left.ribbon-danger>small{*zoom:1;filter:progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFD9534F', endColorstr='#FFB52B27');background-image:-moz-linear-gradient(top,#d9534f 0,#b52b27 100%);background-image:-webkit-linear-gradient(top,#d9534f 0,#b52b27 100%);background-image:linear-gradient(to bottom,#d9534f 0,#b52b27 100%);position:absolute;display:block;width:100%;padding:8px 16px;text-align:center;text-transform:uppercase;text-shadow:0 2px 0 #b52b27;font-weight:700;font-size:65%;color:#fff;background-color:#d9534f;-moz-transform:rotate(50deg);-ms-transform:rotate(50deg);-webkit-transform:rotate(50deg);transform:rotate(50deg);-moz-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);-webkit-box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);box-shadow:0 -3px 6px -3px rgba(0,0,0,.5);bottom:21px;left:-31px}.ribbon.bottom-left.ribbon-danger>small:after,.ribbon.bottom-left.ribbon-danger>small:before{position:absolute;content:" "}.ribbon.bottom-left.ribbon-danger>small:before{left:0}.ribbon.bottom-left.ribbon-danger>small:after{right:0}.ribbon.bottom-left.ribbon-danger>small:after,.ribbon.bottom-left.ribbon-danger>small:before{top:-3px;border-bottom:3px solid #4c1210;border-left:3px solid transparent;border-right:3px solid transparent}.atv,.str{color:#D14}.clo,.opn,.pun{color:#93a1a1}.kwd,.prettyprint .tag{color:#1e347b}.atn,.dec,.typ,.var{color:teal}.lit{color:#195f91}.fun{color:#dc322f}.pln{color:#48484c}.com{font-style:italic;color:#93a1a1}.prettyprint.linenums{-moz-box-shadow:inset 45px 0 0 #fafafa;-webkit-box-shadow:inset 45px 0 0 #fafafa;box-shadow:inset 45px 0 0 #fafafa}.prettyprint ol.linenums{margin:0;margin-left:-5px}.prettyprint ol.linenums>li{padding-left:12px;color:#bebec5;line-height:1.6}.lt-ie9 .prettyprint ol.linenums{margin:0;margin-left:33px} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container"> | |
| <ul class="thumbnails"> | |
| <li> | |
| <div class="content"> | |
| <span class="ribbon top-right ribbon-default"> | |
| <small>default</small> | |
| </span> | |
| <span class="ribbon top-left ribbon-default"> | |
| <small>default</small> | |
| </span> | |
| <span class="ribbon bottom-right ribbon-default"> | |
| <small>default</small> | |
| </span> | |
| <span class="ribbon bottom-left ribbon-default"> | |
| <small>default</small> | |
| </span> | |
| <div class="icon"> | |
| <i class="fa fa-codepen fa-4x"></i> | |
| </div> | |
| <code>.ribbon-default</code> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="content"> | |
| <span class="ribbon top-right ribbon-primary"> | |
| <small>primary</small> | |
| </span> | |
| <span class="ribbon top-left ribbon-primary"> | |
| <small>primary</small> | |
| </span> | |
| <span class="ribbon bottom-right ribbon-primary"> | |
| <small>primary</small> | |
| </span> | |
| <span class="ribbon bottom-left ribbon-primary"> | |
| <small>primary</small> | |
| </span> | |
| <div class="icon"> | |
| <i class="fa fa-github fa-4x"></i> | |
| </div> | |
| <code>.ribbon-primary</code> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="content"> | |
| <span class="ribbon top-right ribbon-success"> | |
| <small>success</small> | |
| </span> | |
| <span class="ribbon top-left ribbon-success"> | |
| <small>success</small> | |
| </span> | |
| <span class="ribbon bottom-right ribbon-success"> | |
| <small>success</small> | |
| </span> | |
| <span class="ribbon bottom-left ribbon-success"> | |
| <small>success</small> | |
| </span> | |
| <div class="icon"> | |
| <i class="fa fa-android fa-4x"></i> | |
| </div> | |
| <code>.ribbon-success</code> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="content"> | |
| <span class="ribbon top-right ribbon-info"> | |
| <small>info</small> | |
| </span> | |
| <span class="ribbon top-left ribbon-info"> | |
| <small>info</small> | |
| </span> | |
| <span class="ribbon bottom-right ribbon-info"> | |
| <small>info</small> | |
| </span> | |
| <span class="ribbon bottom-left ribbon-info"> | |
| <small>info</small> | |
| </span> | |
| <div class="icon"> | |
| <i class="fa fa-twitter fa-4x"></i> | |
| </div> | |
| <code>.ribbon-info</code> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="content"> | |
| <span class="ribbon top-right ribbon-warning"> | |
| <small>warning</small> | |
| </span> | |
| <span class="ribbon top-left ribbon-warning"> | |
| <small>warning</small> | |
| </span> | |
| <span class="ribbon bottom-right ribbon-warning"> | |
| <small>warning</small> | |
| </span> | |
| <span class="ribbon bottom-left ribbon-warning"> | |
| <small>warning</small> | |
| </span> | |
| <div class="icon"> | |
| <i class="fa fa-html5 fa-4x"></i> | |
| </div> | |
| <code>.ribbon-warning</code> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="content"> | |
| <span class="ribbon top-right ribbon-danger"> | |
| <small>danger</small> | |
| </span> | |
| <span class="ribbon top-left ribbon-danger"> | |
| <small>danger</small> | |
| </span> | |
| <span class="ribbon bottom-right ribbon-danger"> | |
| <small>danger</small> | |
| </span> | |
| <span class="ribbon bottom-left ribbon-danger"> | |
| <small>danger</small> | |
| </span> | |
| <div class="icon"> | |
| <i class="fa fa-css3 fa-4x"></i> | |
| </div> | |
| <code>.ribbon-danger</code> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /*! | |
| * CSS3 Ribbons by @pongstr | |
| * http://codepen.io/pongstr/pen/jxhbu | |
| */ | |
| $brand-primary: #428bca; | |
| $brand-success: #5cb85c; | |
| $brand-info: #5bc0de; | |
| $brand-warning: #f0ad4e; | |
| $brand-danger: #d9534f; | |
| $grid-columns: 12; | |
| $grid-gutter-width: 30px; | |
| $screen-xs: 480px; | |
| $screen-sm: 768px; | |
| $screen-md: 992px; | |
| $screen-lg: 1200px; | |
| @mixin clearfix { | |
| &:before, | |
| &:after { | |
| display: table; | |
| content: " "; | |
| } | |
| &:after { clear: both; } | |
| } | |
| @mixin make-row ($gutter: $grid-gutter-width) { | |
| @include clearfix; | |
| margin-left: ($gutter / -2); | |
| margin-right: ($gutter / -2); | |
| @media (min-width: $screen-sm) { | |
| margin-left: ($gutter / -2); | |
| margin-right: ($gutter / -2); | |
| } | |
| } | |
| @mixin make-column-xs ($columns, $gutter: $grid-gutter-width) { | |
| position: relative; | |
| padding-left: ($gutter / 2); | |
| padding-right: ($gutter / 2); | |
| @media (min-width: $screen-xs) { | |
| float: left; | |
| width: percentage(($columns / $grid-columns)); | |
| } | |
| } | |
| @mixin make-column-sm ($columns, $gutter: $grid-gutter-width) { | |
| position: relative; | |
| padding-left: ($gutter / 2); | |
| padding-right: ($gutter / 2); | |
| @media (min-width: $screen-sm) { | |
| float: left; | |
| width: percentage(($columns / $grid-columns)); | |
| } | |
| } | |
| @mixin make-column-md ($columns, $gutter: $grid-gutter-width) { | |
| position: relative; | |
| padding-left: ($gutter / 2); | |
| padding-right: ($gutter / 2); | |
| @media (min-width: $screen-md) { | |
| float: left; | |
| width: percentage(($columns / $grid-columns)); | |
| } | |
| } | |
| @mixin make-column-lg ($columns, $gutter: $grid-gutter-width) { | |
| position: relative; | |
| padding-left: ($gutter / 2); | |
| padding-right: ($gutter / 2); | |
| @media (min-width: $screen-lg) { | |
| float: left; | |
| width: percentage(($columns / $grid-columns)); | |
| } | |
| } | |
| html, | |
| body { | |
| height: 100%; | |
| font-family: "Helvetica Neue", Helvetica, sans-serif; | |
| } | |
| *, *:before, *:after { | |
| @include box-sizing(border-box); | |
| } | |
| .container { | |
| margin-left: auto; | |
| margin-right: auto; | |
| padding-left: ($grid-gutter-width / 2); | |
| padding-right: ($grid-gutter-width / 2); | |
| @media (min-width: $screen-sm) { | |
| width: $screen-sm; | |
| } | |
| @media (min-width: $screen-md) { | |
| width: $screen-md; | |
| } | |
| @media (min-width: $screen-lg) { | |
| width: $screen-lg; | |
| } | |
| } | |
| h1 { | |
| display: block; | |
| clear: both; | |
| width: 96%; | |
| margin: 25px auto; | |
| font-family: "Pacifico", cursive; | |
| font-size: 64px; | |
| font-weight: bold; | |
| text-align: center; | |
| background: -webkit-linear-gradient($brand-info, $brand-primary); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| pre { | |
| @include make-column-xs(12, $grid-gutter-width); | |
| @include make-column-sm(12, $grid-gutter-width); | |
| margin: ($grid-gutter-width / 2) auto; | |
| padding: (($grid-gutter-width / 2) - 5); | |
| font-family: Consolas, Menlo, Courier, monsopace; | |
| font-size: 13px; | |
| line-height: 1.5; | |
| border: 1px solid #ddd; | |
| background-color: #f4f4f4; | |
| border-radius: 4px; | |
| box-shadow: 0 0 5px rgba(#333, .1) inset; | |
| @media (min-width: $screen-md), | |
| (min-width: $screen-lg) { | |
| float: none; | |
| clear: both; | |
| width: 50%; | |
| } | |
| } | |
| code { | |
| display: inline-block; | |
| margin: ($grid-gutter-width / 2) auto; | |
| padding: 5px 10px; | |
| font-size: 13px; | |
| font-weight: bold; | |
| text-shadow: 0 1px 0 #fff; | |
| background-color: #eee; | |
| border: 1px solid #ddd; | |
| border-radius: 3px; | |
| } | |
| ul.thumbnails { | |
| @include clearfix; | |
| @include make-row; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| ul.thumbnails > li { | |
| @include make-column-xs(6, $grid-gutter-width); | |
| @include make-column-sm(4, $grid-gutter-width); | |
| @include make-column-md(3, $grid-gutter-width); | |
| @include make-column-lg(4, $grid-gutter-width); | |
| text-align: center; | |
| border-left: 1px solid #fff; | |
| cursor: pointer; | |
| &:nth-of-type(1) { | |
| color: #000; | |
| } | |
| &:nth-of-type(2) { | |
| color: $brand-primary; | |
| } | |
| &:nth-of-type(3) { | |
| color: $brand-success; | |
| } | |
| &:nth-of-type(4) { | |
| color: $brand-info; | |
| } | |
| &:nth-of-type(5) { | |
| color: $brand-warning; | |
| } | |
| &:nth-of-type(6) { | |
| color: $brand-danger; | |
| } | |
| } | |
| .content { | |
| @include transition(all .2s ease-in); | |
| position: relative; | |
| margin: ($grid-gutter-width / 2) 0; | |
| background-color: #fff; | |
| border: 1px solid #ddd; | |
| border-radius: 3px; | |
| &:hover { | |
| @include transition(all .2s ease-out); | |
| @include transform(scale(1.3, 1.3)); | |
| @include box-shadow(0 0 20px rgba(#000, .2)); | |
| position: relative; | |
| z-index: 500; | |
| } | |
| @media (min-width: $screen-lg) { | |
| min-height: 260px; | |
| } | |
| } | |
| .content .icon { | |
| display: table; | |
| width: 100%; | |
| height: 270px; | |
| text-align: center; | |
| } | |
| .content .icon > .fa { | |
| display: table-cell; | |
| height: 100%; | |
| vertical-align: middle; | |
| } | |
| // Ribbon Variants | |
| @mixin ribbon ($color, $bgcolor1, $bgcolor2, $position: top-right) { | |
| > small { | |
| @include filter-gradient($bgcolor1, $bgcolor2, vertical); | |
| @include background-image(linear-gradient(top, $bgcolor1 0%, $bgcolor2 100%)); | |
| position: absolute; | |
| display: block; | |
| width: 100%; | |
| padding: 8px 16px; | |
| text-align: center; | |
| text-transform: uppercase; | |
| text-shadow: 0 2px 0 darken($bgcolor1, 15%); | |
| font-weight: bold; | |
| font-size: 65%; | |
| color: $color; | |
| background-color: $bgcolor1; | |
| &:before, | |
| &:after { | |
| position: absolute; | |
| content: " "; | |
| } | |
| &:before { left: 0; } | |
| &:after { right: 0; } | |
| @if ($position == top-right) { | |
| @include transform(rotate(45deg)); | |
| @include box-shadow(0 3px 6px -3px rgba(#000, .5)); | |
| top: 16px; | |
| left: 27px; | |
| &:before, &:after { | |
| bottom: -3px; | |
| border-top: 3px solid darken($bgcolor1, 40%); | |
| border-left: 3px solid transparent; | |
| border-right: 3px solid transparent; | |
| } | |
| } | |
| @elseif ($position == top-left) { | |
| @include transform(rotate(-45deg)); | |
| @include box-shadow(0 3px 6px -3px rgba(#000, .5)); | |
| top: 16px; | |
| left: -27px; | |
| &:before, &:after { | |
| bottom: -3px; | |
| border-top: 3px solid darken($bgcolor1, 40%); | |
| border-left: 3px solid transparent; | |
| border-right: 3px solid transparent; | |
| } | |
| } | |
| @elseif ($position == bottom-right) { | |
| @include transform(rotate(-50deg)); | |
| @include box-shadow(0 -3px 6px -3px rgba(#000, .5)); | |
| bottom: 21px; | |
| right: -31px; | |
| &:before, &:after { | |
| top: -3px; | |
| border-bottom: 3px solid darken($bgcolor1, 40%); | |
| border-left: 3px solid transparent; | |
| border-right: 3px solid transparent; | |
| } | |
| } | |
| @elseif ($position == bottom-left) { | |
| @include transform(rotate(50deg)); | |
| @include box-shadow(0 -3px 6px -3px rgba(#000, .5)); | |
| bottom: 21px; | |
| left: -31px; | |
| &:before, &:after { | |
| top: -3px; | |
| border-bottom: 3px solid darken($bgcolor1, 40%); | |
| border-left: 3px solid transparent; | |
| border-right: 3px solid transparent; | |
| } | |
| } | |
| } | |
| } | |
| // base | |
| .ribbon { | |
| position: absolute; | |
| z-index: 100; | |
| width: 120px; | |
| height: 120px; | |
| overflow: hidden; | |
| &.top-right { | |
| top: -3px; | |
| right: -6px; | |
| &.ribbon-default { | |
| @include ribbon(#000, #f4f4f4, #ddd); | |
| } | |
| &.ribbon-primary { | |
| @include ribbon(#fff, $brand-primary, darken($brand-primary, 15%)); | |
| } | |
| &.ribbon-success { | |
| @include ribbon(#fff, $brand-success, darken($brand-success, 15%)); | |
| } | |
| &.ribbon-info { | |
| @include ribbon(#fff, $brand-info, darken($brand-info, 15%)); | |
| } | |
| &.ribbon-warning { | |
| @include ribbon(#fff, $brand-warning, darken($brand-warning, 15%)); | |
| } | |
| &.ribbon-danger { | |
| @include ribbon(#fff, $brand-danger, darken($brand-danger, 15%)); | |
| } | |
| } | |
| &.top-left { | |
| top: -3px; | |
| left: -6px; | |
| &.ribbon-default { | |
| @include ribbon(#000, #f4f4f4, #ddd, top-left); | |
| } | |
| &.ribbon-primary { | |
| @include ribbon(#fff, $brand-primary, darken($brand-primary, 15%), top-left); | |
| } | |
| &.ribbon-success { | |
| @include ribbon(#fff, $brand-success, darken($brand-success, 15%), top-left); | |
| } | |
| &.ribbon-info { | |
| @include ribbon(#fff, $brand-info, darken($brand-info, 15%), top-left); | |
| } | |
| &.ribbon-warning { | |
| @include ribbon(#fff, $brand-warning, darken($brand-warning, 15%), top-left); | |
| } | |
| &.ribbon-danger { | |
| @include ribbon(#fff, $brand-danger, darken($brand-danger, 15%), top-left); | |
| } | |
| } | |
| &.bottom-right { | |
| bottom: -3px; | |
| right: -6px; | |
| &.ribbon-default { | |
| @include ribbon(#000, #f4f4f4, #ddd, bottom-right); | |
| } | |
| &.ribbon-primary { | |
| @include ribbon(#fff, $brand-primary, darken($brand-primary, 15%), bottom-right); | |
| } | |
| &.ribbon-success { | |
| @include ribbon(#fff, $brand-success, darken($brand-success, 15%), bottom-right); | |
| } | |
| &.ribbon-info { | |
| @include ribbon(#fff, $brand-info, darken($brand-info, 15%), bottom-right); | |
| } | |
| &.ribbon-warning { | |
| @include ribbon(#fff, $brand-warning, darken($brand-warning, 15%), bottom-right); | |
| } | |
| &.ribbon-danger { | |
| @include ribbon(#fff, $brand-danger, darken($brand-danger, 15%), bottom-right); | |
| } | |
| } | |
| &.bottom-left { | |
| bottom: -3px; | |
| left: -6px; | |
| &.ribbon-default { | |
| @include ribbon(#000, #f4f4f4, #ddd, bottom-left); | |
| } | |
| &.ribbon-primary { | |
| @include ribbon(#fff, $brand-primary, darken($brand-primary, 15%), bottom-left); | |
| } | |
| &.ribbon-success { | |
| @include ribbon(#fff, $brand-success, darken($brand-success, 15%), bottom-left); | |
| } | |
| &.ribbon-info { | |
| @include ribbon(#fff, $brand-info, darken($brand-info, 15%), bottom-left); | |
| } | |
| &.ribbon-warning { | |
| @include ribbon(#fff, $brand-warning, darken($brand-warning, 15%), bottom-left); | |
| } | |
| &.ribbon-danger { | |
| @include ribbon(#fff, $brand-danger, darken($brand-danger, 15%), bottom-left); | |
| } | |
| } | |
| } | |
| // Prettyprint Stuff | |
| // Prettyprint() | |
| .str, | |
| .atv { color: #D14; } | |
| .pun, | |
| .opn, | |
| .clo { color: #93a1a1; } | |
| .kwd, | |
| .prettyprint | |
| .tag { color: #1e347b; } | |
| .typ, | |
| .atn, | |
| .dec, | |
| .var { color: teal; } | |
| .lit { color: #195f91; } | |
| .fun { color: #dc322f; } | |
| .pln { color: #48484c; } | |
| .com { | |
| font-style: italic; | |
| color: #93a1a1; | |
| } | |
| .prettyprint.linenums { | |
| @include box-shadow(inset 45px 0 0 #fafafa); | |
| } | |
| .prettyprint ol.linenums { | |
| margin: 0; | |
| margin-left: -5px; | |
| } | |
| .prettyprint ol.linenums > li { | |
| padding-left: 12px; | |
| color: #bebec5; | |
| line-height: 1.6; | |
| } | |
| .lt-ie9 .prettyprint ol.linenums { | |
| margin: 0; | |
| margin-left: 33px; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment