eSales Media Git repositories
Browse code

Optimize gallery scss and provide default gallery or teaser gallery

Benjamin Roth authored on26/08/2015 14:42:21
Showing3 changed files
assets/css/gallery_grid.scss
History View file @4355b11
1 1 
deleted file mode 100644
... ... 
@@ -1,33 +0,0 @@
1 
-$col_margin: 2%;
2 
-
3 
-.ce_gallery > ul > li {
4 
-  margin: 0 $col_margin $col_margin;
5 
-  float: left;
6 
-}
7 
-.ce_gallery > ul > li.col_first {
8 
-  clear: none;
9 
-}
10 
-
11 
-.ce_gallery .cols_1 > li {
12 
-  float: none;
13 
-}
14 
-
15 
-.ce_gallery > ul > li:first-child {
16 
-  width: 100%;
17 
-  margin-left: 0;
18 
-  margin-right: 0;
19 
-  float: none;
20 
-}
21 
-
22 
-@for $i from 1 through 12 {
23 
-  .ce_gallery > .cols_#{$i} > li:nth-child(1n+2) {
24 
-    width: (100-($i * (2 * $col_margin) - (2 * $col_margin))) / $i;
25 
-  }
26 
-  .ce_gallery > .cols_#{$i} > li:nth-child(#{$i}n+2) {
27 
-    margin-left: 0;
28 
-    clear: left;
29 
-  }
30 
-  .ce_gallery > .cols_#{$i} > li:nth-child(#{$i}n+1) {
31 
-    margin-right: 0;
32 
-  }
33 
-}
assets/css/gallery_grid_default.scss
History View file @4355b11
34 0 
new file mode 100644
... ... 
@@ -0,0 +1,51 @@
1 
+$col_margin: 2%;
2 
+
3 
+.ce_gallery > ul {
4 
+  &:before,
5 
+  &:after {
6 
+    content: " "; /* 1 */
7 
+    display: table; /* 2 */
8 
+  }
9 
+
10 
+  &:after {
11 
+    clear: both;
12 
+  }
13 
+
14 
+  /**
15 
+   * For IE 6/7 only
16 
+   * Include this rule to trigger hasLayout and contain floats.
17 
+   */
18 
+  & {
19 
+    *zoom: 1;
20 
+  }
21 
+
22 
+  & > li {
23 
+    margin: 0 $col_margin $col_margin;
24 
+    float: left;
25 
+
26 
+    &.col_first {
27 
+      clear: none;
28 
+    }
29 
+
30 
+  }
31 
+
32 
+  &.cols_1 > li {
33 
+    float: none;
34 
+  }
35 
+
36 
+  @for $i from 1 through 12 {
37 
+    &.cols_#{$i} > li:nth-child(1n) {
38 
+      width: (100-($i * (2 * $col_margin) - (2 * $col_margin))) / $i;
39 
+    }
40 
+    &.cols_#{$i} > li:nth-child(#{$i}n+1) {
41 
+      margin-left: 0;
42 
+      clear: left;
43 
+    }
44 
+    &.cols_#{$i} > li:nth-child(#{$i}n) {
45 
+      margin-right: 0;
46 
+    }
47 
+  }
48 
+}
49 
+
50 
+
51 
+
assets/css/gallery_grid_teaser.scss
History View file @4355b11
0 52 
new file mode 100644
... ... 
@@ -0,0 +1,57 @@
1 
+$col_margin: 2%;
2 
+
3 
+.ce_gallery > ul {
4 
+  &:before,
5 
+  &:after {
6 
+    content: " "; /* 1 */
7 
+    display: table; /* 2 */
8 
+  }
9 
+
10 
+  &:after {
11 
+    clear: both;
12 
+  }
13 
+
14 
+  /**
15 
+   * For IE 6/7 only
16 
+   * Include this rule to trigger hasLayout and contain floats.
17 
+   */
18 
+  & {
19 
+    *zoom: 1;
20 
+  }
21 
+
22 
+  & > li {
23 
+    margin: 0 $col_margin $col_margin;
24 
+    float: left;
25 
+
26 
+    &.col_first {
27 
+      clear: none;
28 
+    }
29 
+
30 
+    &:first-child {
31 
+      width: 100%;
32 
+      margin-left: 0;
33 
+      margin-right: 0;
34 
+      float: none;
35 
+    }
36 
+  }
37 
+
38 
+  &.cols_1 > li {
39 
+    float: none;
40 
+  }
41 
+
42 
+  @for $i from 1 through 12 {
43 
+    &.cols_#{$i} > li:nth-child(1n+2) {
44 
+      width: (100-($i * (2 * $col_margin) - (2 * $col_margin))) / $i;
45 
+    }
46 
+    &.cols_#{$i} > li:nth-child(#{$i}n+2) {
47 
+      margin-left: 0;
48 
+      clear: left;
49 
+    }
50 
+    &.cols_#{$i} > li:nth-child(#{$i}n+1) {
51 
+      margin-right: 0;
52 
+    }
53 
+  }
54 
+}
55 
+
56 
+
57 
+