eSales Media Git repositories
Browse code

Support contao image float classes

Benjamin Roth authored on27/10/2017 13:43:58
Showing1 changed files
assets/css/scss/base.scss
History View file @af4b16f
... ... 
@@ -119,6 +119,21 @@ img {
119 119 
 }
120 120
121 121 
 /**
122 
+ * Support contao image float classes
123 
+ */
124 
+.image_container {
125 
+  &.float_right {
126 
+    float: right;
127 
+    margin: 0 0 $gutter-default $gutter-default;
128 
+  }
129 
+
130 
+  &.float_left {
131 
+    float: left;
132 
+    margin: 0 $gutter-default $gutter-default 0;
133 
+  }
134 
+}
135 
+
136 
+/**
122 137 
  * Clear floats
123 138 
  */
124 139
Browse code

Add additional 1200px centered mixin, modify font-size function to use rem unit, add a colsize function

Benjamin Roth authored on27/10/2017 13:42:22
Showing1 changed files
assets/css/scss/base.scss
History View file @c6bb09f
... ... 
@@ -7,7 +7,12 @@
7 7 
  * Functions
8 8 
  */
9 9 
 @function font-size($size,$ascendant-font-size: $font-size-default) {
10 
-  @return $size / $ascendant-font-size * 100%
10 
+  //@return $size / $ascendant-font-size * 100%
11 
+  @return $size / $ascendant-font-size * 1rem
12 
+}
13 
+
14 
+@function col-size($gutter-width, $cols, $span: 1) {
15 
+  @return (((100% - $gutter-width * ($cols - 1)) / $cols) * $span + $gutter-width * ($span - 1))
11 16 
 }
12 17
13 18 
 /**
... ... 
@@ -39,6 +44,28 @@
39 44 
   max-width: 960px;
40 45 
   margin: 0 auto;
41 46 
   position: relative;
47 
+
48 
+  @media screen and (max-width: 990px) {
49 
+    -webkit-box-sizing: border-box;
50 
+    -moz-box-sizing: border-box;
51 
+    box-sizing: border-box;
52 
+    padding-left: 15px;
53 
+    padding-right: 15px;
54 
+  }
55 
+}
56 
+
57 
+@mixin centered-1200 {
58 
+  max-width: 1200px;
59 
+  margin: 0 auto;
60 
+  position: relative;
61 
+
62 
+  @media screen and (max-width: 1230px) {
63 
+    -webkit-box-sizing: border-box;
64 
+    -moz-box-sizing: border-box;
65 
+    box-sizing: border-box;
66 
+    padding-left: 15px;
67 
+    padding-right: 15px;
68 
+  }
42 69 
 }
43 70
44 71 
 @mixin cf {
Browse code

Optimizations and extensions

Benjamin Roth authored on19/01/2017 13:34:46
Showing1 changed files
assets/css/scss/base.scss
History View file @82508bd
... ... 
@@ -14,16 +14,20 @@
14 14 
  * Mixins
15 15 
  */
16 16
17 
-@mixin font-awesome {
17 
+@mixin iconfont {
18 18 
   display: inline-block;
19 
-  font: normal normal normal 14px/1 FontAwesome;
20 
-  font-size: inherit;
21 
-  text-rendering: auto;
19 
+  font-family: 'icomoon' !important;
20 
+  speak: none;
21 
+  font-style: normal;
22 
+  font-weight: normal;
23 
+  font-variant: normal;
24 
+  text-transform: none;
25 
+  line-height: 1;
22 26 
   -webkit-font-smoothing: antialiased;
23 27 
   -moz-osx-font-smoothing: grayscale;
24 28 
 }
25 29
26 
-@mixin fa-text-replacement($height, $width) {
30 
+@mixin icon-text-replacement($height, $width) {
27 31 
   height: $height;
28 32 
   width: $width;
29 33 
   padding: 0;
... ... 
@@ -37,6 +41,26 @@
37 41 
   position: relative;
38 42 
 }
39 43
44 
+@mixin cf {
45 
+  &:before,
46 
+  &:after {
47 
+    content: " "; /* 1 */
48 
+    display: table; /* 2 */
49 
+  }
50 
+
51 
+  &:after {
52 
+    clear: both;
53 
+  }
54 
+
55 
+  /**
56 
+   * For IE 6/7 only
57 
+   * Include this rule to trigger hasLayout and contain floats.
58 
+   */
59 
+  & {
60 
+    *zoom: 1;
61 
+  }
62 
+}
63 
+
40 64 
 /**
41 65 
  * Hide invisible elements
42 66 
  */
... ... 
@@ -75,23 +99,7 @@ img {
75 99 
 .block,
76 100 
 #container,
77 101 
 .inside {
78 
-  &:before,
79 
-  &:after {
80 
-	content: " "; /* 1 */
81 
-	display: table; /* 2 */
82 
-  }
83 
-
84 
-  &:after {
85 
-	clear: both;
86 
-  }
87 
-
88 
-  /**
89 
-   * For IE 6/7 only
90 
-   * Include this rule to trigger hasLayout and contain floats.
91 
-   */
92 
-  & {
93 
-	*zoom: 1;
94 
-  }
102 
+  @include cf;
95 103 
 }
96 104
97 105 
 @if $load-holy-grail-layout {
... ... 
@@ -116,8 +124,11 @@ img {
116 124 
  * Standards
117 125 
  */
118 126
119 
-body {
127 
+html, body {
120 128 
   font: $font-size-default/$line-height-default $font-family;
129 
+}
130 
+
131 
+body {
121 132 
   font-weight: $font-weight-default;
122 133 
   color: $color-text;
123 134 
 }
Browse code

Add load flag to decide whether to include equalize classes

Benjamin Roth authored on29/09/2015 11:22:04
Showing1 changed files
assets/css/scss/base.scss
History View file @a1d449d
... ... 
@@ -98,6 +98,10 @@ img {
98 98 
   @include holy-grail-layout;
99 99 
 }
100 100
101 
+@if $load-equalize {
102 
+  @include equalize;
103 
+}
104 
+
101 105 
 /**
102 106 
  * Basic positioning
103 107 
  */
Browse code

Add ascendant font size parameter to font size function

Benjamin Roth authored on29/09/2015 11:20:40
Showing1 changed files
assets/css/scss/base.scss
History View file @6b3b08f
... ... 
@@ -6,8 +6,8 @@
6 6 
 /**
7 7 
  * Functions
8 8 
  */
9 
-@function font-size($size) {
10 
-  @return $size / $font-size-default * 100%
9 
+@function font-size($size,$ascendant-font-size: $font-size-default) {
10 
+  @return $size / $ascendant-font-size * 100%
11 11 
 }
12 12
13 13 
 /**
Browse code

Use loader file for layout includes

Benjamin Roth authored on29/09/2015 11:19:30
Showing1 changed files
assets/css/scss/base.scss
History View file @c186a41
... ... 
@@ -1,7 +1,7 @@
1 1 
 @import "compass";
2 2 
 @import "_settings";
3 3 
 @import "compass/reset";
4 
-@import "inc/layout/_sticky_footer";
4 
+@import "inc/layout";
5 5
6 6 
 /**
7 7 
  * Functions
Browse code

Use a more modular structure for better extensibility

Benjamin Roth authored on28/08/2015 08:55:03
Showing1 changed files
assets/css/scss/base.scss
History View file @2268328
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,124 @@
1 
+@import "compass";
2 
+@import "_settings";
3 
+@import "compass/reset";
4 
+@import "inc/layout/_sticky_footer";
5 
+
6 
+/**
7 
+ * Functions
8 
+ */
9 
+@function font-size($size) {
10 
+  @return $size / $font-size-default * 100%
11 
+}
12 
+
13 
+/**
14 
+ * Mixins
15 
+ */
16 
+
17 
+@mixin font-awesome {
18 
+  display: inline-block;
19 
+  font: normal normal normal 14px/1 FontAwesome;
20 
+  font-size: inherit;
21 
+  text-rendering: auto;
22 
+  -webkit-font-smoothing: antialiased;
23 
+  -moz-osx-font-smoothing: grayscale;
24 
+}
25 
+
26 
+@mixin fa-text-replacement($height, $width) {
27 
+  height: $height;
28 
+  width: $width;
29 
+  padding: 0;
30 
+  margin: 0;
31 
+  overflow: hidden;
32 
+}
33 
+
34 
+@mixin centered-960 {
35 
+  max-width: 960px;
36 
+  margin: 0 auto;
37 
+  position: relative;
38 
+}
39 
+
40 
+/**
41 
+ * Hide invisible elements
42 
+ */
43 
+.invisible {
44 
+  border:0;
45 
+  clip:rect(0 0 0 0);
46 
+  height:1px;
47 
+  margin:-1px;
48 
+  overflow:hidden;
49 
+  padding:0;
50 
+  position:absolute;
51 
+  width:1px;
52 
+}
53 
+
54 
+/**
55 
+ * Flexible images (videos see #4896)
56 
+ *
57 
+ * @see http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
58 
+ */
59 
+img {
60 
+  max-width:100%;
61 
+  height:auto;
62 
+}
63 
+.ie7 img {
64 
+  -ms-interpolation-mode:bicubic;
65 
+}
66 
+.ie8 img {
67 
+  width:auto; /* see #5789 */
68 
+}
69 
+
70 
+/**
71 
+ * Clear floats
72 
+ */
73 
+
74 
+.cf,
75 
+.block,
76 
+#container,
77 
+.inside {
78 
+  &:before,
79 
+  &:after {
80 
+	content: " "; /* 1 */
81 
+	display: table; /* 2 */
82 
+  }
83 
+
84 
+  &:after {
85 
+	clear: both;
86 
+  }
87 
+
88 
+  /**
89 
+   * For IE 6/7 only
90 
+   * Include this rule to trigger hasLayout and contain floats.
91 
+   */
92 
+  & {
93 
+	*zoom: 1;
94 
+  }
95 
+}
96 
+
97 
+@if $load-holy-grail-layout {
98 
+  @include holy-grail-layout;
99 
+}
100 
+
101 
+/**
102 
+ * Basic positioning
103 
+ */
104 
+
105 
+#header,
106 
+#main, #left, #right,
107 
+#footer {
108 
+  position: relative;
109 
+}
110 
+
111 
+/**
112 
+ * Standards
113 
+ */
114 
+
115 
+body {
116 
+  font: $font-size-default/$line-height-default $font-family;
117 
+  font-weight: $font-weight-default;
118 
+  color: $color-text;
119 
+}
120 
+
121 
+a {
122 
+  text-decoration: none;
123 
+  color: $color-link;
124 
+}
0 125 
\ No newline at end of file