--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/pyams_skin/resources/less/superbox.less Thu Feb 19 10:59:00 2015 +0100
@@ -0,0 +1,129 @@
+/*
+ * Superbox component
+ */
+
+.superbox *,
+.superbox :after,
+.superbox :before {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ -o-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+ text-rendering: optimizeLegibility;
+}
+
+.superbox {
+ &-list {
+ display: inline-block;
+ *display: inline;
+ zoom: 1;
+ width: 12.5%;
+ padding: 5px;
+ position: relative;
+
+ &.active:before {
+ content: "\f0d8";
+ font-family: FontAwesome;
+ display: block;
+ position: absolute;
+ left: 43%;
+ bottom: -34px;
+ z-index: 2;
+ text-align: center;
+ font-size: 45px;
+ color: #222;
+ }
+
+ @media only screen and (min-width:320px) {
+ width: 50%;
+ }
+ @media only screen and (min-width:486px) {
+ width: 25%;
+ }
+ @media only screen and (min-width:768px) {
+ width: 16.66666667%;
+ }
+ @media only screen and (min-width:1025px) {
+ width: 12.5%;
+ }
+ @media only screen and (min-width:1824px) {
+ width: 12.5%;
+ }
+ }
+
+ &-img {
+ max-width: 100%;
+ width: 100%;
+ cursor: pointer;
+ }
+
+ &-show {
+ text-align: left;
+ position: relative;
+ background-color: #222;
+ width: 100%;
+ float: left;
+ padding: 25px 0 12px 25px;
+ display: none;
+ margin: 5px 0;
+ }
+
+ &-current-img {
+ max-width: 100%;
+ float: left;
+ padding-right: 25px;
+ padding-bottom: 13px;
+ }
+
+ &-img:hover {
+ opacity: .8;
+ }
+
+ &-float {
+ float: left;
+ }
+
+ &-close {
+ opacity: .7;
+ cursor: pointer;
+ position: absolute;
+ top: 15px;
+ right: 15px;
+ -webkit-transition: all .1s linear 0s;
+ transition: all .1s linear 0s;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ &-imageinfo {
+ display: inline-block;
+ max-width: 500px;
+ color: #fff;
+ padding: 0 25px 0 0;
+
+ span {
+ font-size: 13px;
+ color: #a19994;
+ margin-right: -2px;
+ padding-top: 10px;
+ display: inline-block;
+ padding-bottom: 13px;
+ }
+
+ >:first-child {
+ margin-bottom: 10px;
+ font-weight: 700;
+ }
+
+ span p:last-child {
+ margin-top: 30px;
+ }
+ }
+}