Initial commit

[editorial.git] / assets / main / sass / components / _image.scss

diff --git a/assets/main/sass/components/_image.scss b/assets/main/sass/components/_image.scss
new file mode 100644 (file)
index 0000000..a86eb43
--- /dev/null
+++ b/assets/main/sass/components/_image.scss
@@ -0,0 +1,92 @@
+///\r
+/// Massively by HTML5 UP\r
+/// html5up.net | @ajlkn\r
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
+///\r
+\r
+/* Image */\r
+\r
+       .image {\r
+               border: 0;\r
+               border-radius: _size(border-radius);\r
+               display: inline-block;\r
+               position: relative;\r
+\r
+               img {\r
+                       border-radius: _size(border-radius);\r
+                       display: block;\r
+               }\r
+\r
+               &.left,\r
+               &.right {\r
+                       max-width: 40%;\r
+\r
+                       img {\r
+                               width: 100%;\r
+                       }\r
+               }\r
+\r
+               &.left {\r
+                       float: left;\r
+                       margin: 0 2rem 2rem 0;\r
+                       top: 0.75rem;\r
+               }\r
+\r
+               &.right {\r
+                       float: right;\r
+                       margin: 0 0 2rem 2rem;\r
+                       top: 0.75rem;\r
+               }\r
+\r
+               &.fit {\r
+                       display: block;\r
+                       margin: (_size(element-margin) * 1.25) 0;\r
+                       width: 100%;\r
+\r
+                       &:first-child {\r
+                               margin-top: 0;\r
+                       }\r
+\r
+                       img {\r
+                               width: 100%;\r
+                       }\r
+               }\r
+\r
+               &.main {\r
+                       display: block;\r
+                       margin: (_size(element-margin) * 2) 0;\r
+                       width: 100%;\r
+\r
+                       &:first-child {\r
+                               margin-top: 0;\r
+                       }\r
+\r
+                       img {\r
+                               width: 100%;\r
+                       }\r
+               }\r
+\r
+               @include breakpoint('<=small') {\r
+                       &.fit {\r
+                               margin: _size(element-margin) 0;\r
+                       }\r
+\r
+                       &.main {\r
+                               margin: _size(element-margin) 0;\r
+                       }\r
+               }\r
+       }\r
+\r
+       a.image {\r
+               overflow: hidden;\r
+\r
+               img {\r
+                       @include vendor('transition', 'transform #{_duration(transition)} ease-out');\r
+               }\r
+\r
+               &:hover {\r
+                       img {\r
+                               @include vendor('transform', 'scale(1.05)');\r
+                       }\r
+               }\r
+       }
\ No newline at end of file