From dedfd8a8098db999f81a55a845e0e4d041f9d7a8 Mon Sep 17 00:00:00 2001 From: Darin Dimitroff Date: Tue, 22 Nov 2016 13:07:51 +0200 Subject: Adds Tachyons --- src/css/imports/_background-position.css | 126 +++++++++++++++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100755 src/css/imports/_background-position.css (limited to 'src/css/imports/_background-position.css') diff --git a/src/css/imports/_background-position.css b/src/css/imports/_background-position.css new file mode 100755 index 0000000..4d850b6 --- /dev/null +++ b/src/css/imports/_background-position.css @@ -0,0 +1,126 @@ +/* + + BACKGROUND POSITION + + Base: + bg = background + + Modifiers: + -center = center center + -top = top center + -right = center right + -bottom = bottom center + -left = center left + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.bg-center { + background-repeat: no-repeat; + background-position: center center; +} + +.bg-top { + background-repeat: no-repeat; + background-position: top center; +} + +.bg-right { + background-repeat: no-repeat; + background-position: center right; +} + +.bg-bottom { + background-repeat: no-repeat; + background-position: bottom center; +} + +.bg-left { + background-repeat: no-repeat; + background-position: center left; +} + +@media (--breakpoint-not-small) { + .bg-center-ns { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-ns { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-ns { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-ns { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-ns { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media (--breakpoint-medium) { + .bg-center-m { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-m { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-m { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-m { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-m { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media (--breakpoint-large) { + .bg-center-l { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-l { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-l { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-l { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-l { + background-repeat: no-repeat; + background-position: center left; + } +} -- cgit v1.3