From 9b8fff5a4dadfe77ce42dd228937d8f34dd06772 Mon Sep 17 00:00:00 2001 From: "German M. Bravo" Date: Sun, 18 Aug 2013 17:22:33 -0500 Subject: Added more tests we need to get passed --- scss/tests/files/kronuz/args.css | 5 + scss/tests/files/kronuz/args.scss | 24 + .../files/kronuz/duplicate-adjacent-rules.css | 5 + .../files/kronuz/duplicate-adjacent-rules.scss | 6 + scss/tests/files/kronuz/image-colors.css | 3 + scss/tests/files/kronuz/image-colors.scss | 4 + scss/tests/files/kronuz/include/_menu.scss | 1139 ++++++++++++++++++++ scss/tests/files/kronuz/linear-gradient.css | 3 + scss/tests/files/kronuz/linear-gradient.scss | 3 + scss/tests/files/kronuz/menu.css | 3 + scss/tests/files/kronuz/menu.scss | 32 + scss/tests/files/kronuz/mul-em.css | 3 + scss/tests/files/kronuz/mul-em.scss | 5 + scss/tests/files/kronuz/mul-list.css | 3 + scss/tests/files/kronuz/mul-list.scss | 3 + scss/tests/files/kronuz/rgba-colors.css | 4 + scss/tests/files/kronuz/rgba-colors.scss | 4 + scss/tests/files/kronuz/sprite-map.css | 13 + scss/tests/files/kronuz/sprite-map.scss | 19 + scss/tests/files/kronuz/static/assets/.placeholder | 0 .../files/kronuz/static/squares/ten-by-ten.png | Bin 0 -> 118 bytes .../kronuz/static/squares/twenty-by-twenty.png | Bin 0 -> 126 bytes 22 files changed, 1281 insertions(+) create mode 100644 scss/tests/files/kronuz/args.css create mode 100644 scss/tests/files/kronuz/args.scss create mode 100644 scss/tests/files/kronuz/duplicate-adjacent-rules.css create mode 100644 scss/tests/files/kronuz/duplicate-adjacent-rules.scss create mode 100644 scss/tests/files/kronuz/image-colors.css create mode 100644 scss/tests/files/kronuz/image-colors.scss create mode 100644 scss/tests/files/kronuz/include/_menu.scss create mode 100644 scss/tests/files/kronuz/linear-gradient.css create mode 100644 scss/tests/files/kronuz/linear-gradient.scss create mode 100644 scss/tests/files/kronuz/menu.css create mode 100644 scss/tests/files/kronuz/menu.scss create mode 100644 scss/tests/files/kronuz/mul-em.css create mode 100644 scss/tests/files/kronuz/mul-em.scss create mode 100644 scss/tests/files/kronuz/mul-list.css create mode 100644 scss/tests/files/kronuz/mul-list.scss create mode 100644 scss/tests/files/kronuz/rgba-colors.css create mode 100644 scss/tests/files/kronuz/rgba-colors.scss create mode 100644 scss/tests/files/kronuz/sprite-map.css create mode 100644 scss/tests/files/kronuz/sprite-map.scss create mode 100644 scss/tests/files/kronuz/static/assets/.placeholder create mode 100644 scss/tests/files/kronuz/static/squares/ten-by-ten.png create mode 100644 scss/tests/files/kronuz/static/squares/twenty-by-twenty.png diff --git a/scss/tests/files/kronuz/args.css b/scss/tests/files/kronuz/args.css new file mode 100644 index 0000000..7022939 --- /dev/null +++ b/scss/tests/files/kronuz/args.css @@ -0,0 +1,5 @@ +div { + min-height: 60px; + height: auto !important; + height: 60px; +} diff --git a/scss/tests/files/kronuz/args.scss b/scss/tests/files/kronuz/args.scss new file mode 100644 index 0000000..1a3d1b8 --- /dev/null +++ b/scss/tests/files/kronuz/args.scss @@ -0,0 +1,24 @@ +$legacy-support-for-ie6: true; + +// A hack to supply IE6 (and below) with a different property value. +// [Read more](http://www.cssportal.com/css-hacks/#in_css-important). +@mixin bang-hack($property, $value, $ie6-value) { + @if $legacy-support-for-ie6 { + #{$property}: #{$value} !important; + #{$property}: #{$ie6-value}; + } +} + +// @private This mixin is not meant to be used directly. +@mixin hacked-minimum($property, $value) { + min-#{$property}: $value; + @include bang-hack($property, auto, $value); } + +//** +// Cross browser min-height mixin. +@mixin min-height($value) { + @include hacked-minimum(height, $value); } + +div { + +min-height: 60px; +} diff --git a/scss/tests/files/kronuz/duplicate-adjacent-rules.css b/scss/tests/files/kronuz/duplicate-adjacent-rules.css new file mode 100644 index 0000000..d395812 --- /dev/null +++ b/scss/tests/files/kronuz/duplicate-adjacent-rules.css @@ -0,0 +1,5 @@ +div { + *zoom: 1; + color: red; + *zoom: 1; +} diff --git a/scss/tests/files/kronuz/duplicate-adjacent-rules.scss b/scss/tests/files/kronuz/duplicate-adjacent-rules.scss new file mode 100644 index 0000000..e078539 --- /dev/null +++ b/scss/tests/files/kronuz/duplicate-adjacent-rules.scss @@ -0,0 +1,6 @@ +div { + *zoom: 1; + *zoom: 1; + color: red; + *zoom: 1; +} \ No newline at end of file diff --git a/scss/tests/files/kronuz/image-colors.css b/scss/tests/files/kronuz/image-colors.css new file mode 100644 index 0000000..352410f --- /dev/null +++ b/scss/tests/files/kronuz/image-colors.css @@ -0,0 +1,3 @@ +.mod { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVR4nGNkaGD4z0AEYCJG0ahC6ikEAHImAZMaPk6DAAAAAElFTkSuQmCC); +} diff --git a/scss/tests/files/kronuz/image-colors.scss b/scss/tests/files/kronuz/image-colors.scss new file mode 100644 index 0000000..ee18bde --- /dev/null +++ b/scss/tests/files/kronuz/image-colors.scss @@ -0,0 +1,4 @@ +@option compress:no; +.mod { + background: inline-image("squares/ten-by-ten.png", $src-color: #c4c4c4, $dst-color: green); +} diff --git a/scss/tests/files/kronuz/include/_menu.scss b/scss/tests/files/kronuz/include/_menu.scss new file mode 100644 index 0000000..eb67ca2 --- /dev/null +++ b/scss/tests/files/kronuz/include/_menu.scss @@ -0,0 +1,1139 @@ +$default-menu-levels: 3 !default; + +@mixin _menu-horizontal($level) { + $l: $level; + + ul.l#{$l} { + margin: 0; + padding: 0; + list-style: none; + + @if $u#{$l}-padding-natural != undefined { + padding: $u#{$l}-padding-natural; + } + @if $u#{$l}-margin-natural != undefined { + margin: $u#{$l}-margin-natural; + } + + background-clip: padding-box; + @if $u#{$l}-background-natural != undefined { + @if $u#{$l}-background-natural != $u#{$l}-background-natural-rgb and $u#{$l}-background-natural-rgb != undefined { + background: $u#{$l}-background-natural-rgb; + } + background: $u#{$l}-background-natural; + } + @if $u#{$l}-background-color-natural != undefined { + @if $u#{$l}-background-color-natural != $u#{$l}-background-color-natural-rgb and $u#{$l}-background-color-natural-rgb != undefined { + background-color: $u#{$l}-background-color-natural-rgb; + } + background-color: $u#{$l}-background-color-natural; + } + @if $u#{$l}-background-image-natural != undefined { + background-image: $u#{$l}-background-image-natural; + } + +// @if $u#{$l}-box-shadow-natural != undefined { +// box-shadow: $u#{$l}-box-shadow-natural; +// } + + @if $u#{$l}-border-width-natural != undefined { + border-width: $u#{$l}-border-width-natural; + border-style: solid; + } + @if $u#{$l}-border-color-natural != undefined { + @if $u#{$l}-border-color-natural != $u#{$l}-border-color-natural-rgb and $u#{$l}-border-color-natural-rgb != undefined { + border-color: $u#{$l}-border-color-natural-rgb; + } + border-color: $u#{$l}-border-color-natural; + } + + @if $u#{$l}-border-radius-natural != undefined { + border-radius: $u#{$l}-border-radius-natural; + } + +// &.focused, + &.hover, + &:hover { + @if $u#{$l}-background-hover != undefined { + @if $u#{$l}-background-hover != $u#{$l}-background-hover-rgb and $u#{$l}-background-hover-rgb != undefined { + background: $u#{$l}-background-hover-rgb; + } + background: $u#{$l}-background-hover; + } + @if $u#{$l}-background-color-hover != undefined { + @if $u#{$l}-background-color-hover != $u#{$l}-background-color-hover-rgb and $u#{$l}-background-color-hover-rgb != undefined { + background-color: $u#{$l}-background-color-hover-rgb; + } + background-color: $u#{$l}-background-color-hover; + } + @if $u#{$l}-background-image-hover != undefined { + background-image: $u#{$l}-background-image-hover; + } + } + + // Special case for nesting (depending on current behavior): + + @if $u#{$l}-keep-current { + $_current: nest('&, &:hover', 'li.l#{$l}.current'); // Makes current remain selected on hover + } @else { + $_current: 'li.l#{$l}.current'; // Makes current get unselected on hover + } + $_selectors: append(nest('&, &:hover', 'li.l#{$l}:hover'), $_current); + + #{$_selectors} { + /****** Structure Starts ******/ + @if $i#{$l}-roundness-natural or $i#{$l}-roundness-folder { + $max-roundness: max($i#{$l}-roundness-natural, $i#{$l}-roundness-folder); + &::before, + a.l#{$l}::before, + .a.l#{$l}::before, + &::after, + a.l#{$l}::after, + .a.l#{$l}::after { + content: ""; + display: block; + position: absolute; + top: 0; + bottom: 0; + width: $max-roundness; + } + &::before, + a.l#{$l}::before, + .a.l#{$l}::before { + left: -$max-roundness; + } + &::after, + a.l#{$l}::after, + .a.l#{$l}::after { + right: -$max-roundness; + } + &::before, + &::after { + z-index: -1; + } + a.l#{$l}::before, + .a.l#{$l}::before, + a.l#{$l}::after, + .a.l#{$l}::after { + z-index: 1; + } + } + /****** Structure Ends ******/ + + a.l#{$l}, + .a.l#{$l} { + @if $i#{$l}-roundness-natural { + &::before { + border-top-right-radius: $i#{$l}-roundness-natural; + } + &::after { + border-top-left-radius: $i#{$l}-roundness-natural; + } + } + } + } + + #{$_current} { + &::before, + &::after { + background-clip: padding-box; + @if $i#{$l}-background-current != undefined { + @if $i#{$l}-background-current != $i#{$l}-background-current-rgb and $i#{$l}-background-current-rgb != undefined { + background: $i#{$l}-background-current-rgb; + } + background: $i#{$l}-background-current; // NOTE: this is really not part of the structure (put here as optimization) + } + @if $i#{$l}-background-color-current != undefined { + @if $i#{$l}-background-color-current != $i#{$l}-background-color-current-rgb and $i#{$l}-background-color-current-rgb != undefined { + background-color: $i#{$l}-background-color-current-rgb; + } + background-color: $i#{$l}-background-color-current; + } + @if $i#{$l}-background-image-current != undefined { + background-image: $i#{$l}-background-image-current; + } + } + a.l#{$l}::before, + .a.l#{$l}::before, + a.l#{$l}::after, + .a.l#{$l}::after { + @if $i#{$l}-roundness-background-current != undefined { + background: $i#{$l}-roundness-background-current; // NOTE: this is really not part of the structure (put here as optimization) + } + @if $i#{$l}-roundness-background-image-current != undefined { + background-image: $i#{$l}-roundness-background-image-current; + } + } + a.l#{$l}, + .a.l#{$l} { + .label { + @if $i#{$l}-color-current != undefined { + @if $i#{$l}-color-current != $i#{$l}-color-current-rgb and $i#{$l}-color-current-rgb != undefined { + color: $i#{$l}-color-current-rgb; + } + color: $i#{$l}-color-current; + } + @if $i#{$l}-text-shadow-current != undefined { + text-shadow: $i#{$l}-text-shadow-current; + } + + @if $i#{$l}-height-natural != undefined { + @if $i#{$l}-border-width-current != undefined { + height: $i#{$l}-height-natural - nth($i#{$l}-border-width-current, 1) - nth($i#{$l}-border-width-current, 3); + } + } + @if $i#{$l}-line-height-natural != undefined { + @if $i#{$l}-border-width-current != undefined { + line-height: $i#{$l}-line-height-natural - nth($i#{$l}-border-width-current, 1) - nth($i#{$l}-border-width-current, 3); + } + } + } + &.folder .tag { + padding-right: 12px; + @if $i#{$l}-arrow-color-current != undefined { + @if $u#{$l + 1}-type == dropup { + background: image-url('images/menus/arrow_up.png', $dst-color: $i#{$l}-arrow-color-current) no-repeat right center; + } @else if $u#{$l + 1}-type == dropright { + background: image-url('images/menus/arrow_right.png', $dst-color: $i#{$l}-arrow-color-current) no-repeat right center; + } @else if $u#{$l + 1}-type == dropleft { + background: image-url('images/menus/arrow_left.png', $dst-color: $i#{$l}-arrow-color-current) no-repeat right center; + } @else { + background: image-url('images/menus/arrow_down.png', $dst-color: $i#{$l}-arrow-color-current) no-repeat right center; + } + } + } + @if $i#{$l}-background-current != undefined { + @if $i#{$l}-background-current != $i#{$l}-background-current-rgb and $i#{$l}-background-current-rgb != undefined { + background: $i#{$l}-background-current-rgb; + } + background: $i#{$l}-background-current; + } + @if $i#{$l}-background-color-current != undefined { + @if $i#{$l}-background-color-current != $i#{$l}-background-color-current-rgb and $i#{$l}-background-color-current-rgb != undefined { + background-color: $i#{$l}-background-color-current-rgb; + } + background-color: $i#{$l}-background-color-current; + } + @if $i#{$l}-background-image-current != undefined { + background-image: $i#{$l}-background-image-current; + } + + @if $i#{$l}-box-shadow-current != undefined { + box-shadow: $i#{$l}-box-shadow-current; + } + + @if $i#{$l}-border-width-current != undefined { + border-width: $i#{$l}-border-width-current; + border-style: solid; + } + @if $i#{$l}-border-color-current != undefined { + @if $i#{$l}-border-color-current != $i#{$l}-border-color-current-rgb and $i#{$l}-border-color-current-rgb != undefined { + border-color: $i#{$l}-border-color-current-rgb; + } + border-color: $i#{$l}-border-color-current; + } + + @if $i#{$l}-border-radius-current { + border-radius: $i#{$l}-border-radius-current; + } + } + } + +// &.focused, + &.hover, + &:hover, + & { +// li.l#{$l}.focused, + li.l#{$l}.hover, + li.l#{$l}:hover { + &::before, + &::after { + @if $i#{$l}-background-hover != undefined { + @if $i#{$l}-background-hover != $i#{$l}-background-hover-rgb and $i#{$l}-background-hover-rgb != undefined { + background: $i#{$l}-background-hover-rgb; + } + background: $i#{$l}-background-hover; // NOTE: this is really not part of the structure (put here as optimization) + } + @if $i#{$l}-background-color-hover != undefined { + @if $i#{$l}-background-color-hover != $i#{$l}-background-color-hover-rgb and $i#{$l}-background-color-hover-rgb != undefined { + background-color: $i#{$l}-background-color-hover-rgb; + } + background-color: $i#{$l}-background-color-hover; + } + @if $i#{$l}-background-image-hover != undefined { + background-image: $i#{$l}-background-image-hover; + } + } + a.l#{$l}::before, + .a.l#{$l}::before, + a.l#{$l}::after, + .a.l#{$l}::after { + @if $i#{$l}-roundness-background-hover != undefined { + background: $i#{$l}-roundness-background-hover; // NOTE: this is really not part of the structure (put here as optimization) + } + @if $i#{$l}-roundness-background-image-hover != undefined { + background-image: $i#{$l}-roundness-background-image-hover; + } + } + a.l#{$l}, + .a.l#{$l} { + .label { + @if $i#{$l}-color-hover != undefined { + @if $i#{$l}-color-hover != $i#{$l}-color-hover-rgb and $i#{$l}-color-hover-rgb != undefined { + color: $i#{$l}-color-hover-rgb; + } + color: $i#{$l}-color-hover; + } + @if $i#{$l}-text-shadow-hover != undefined { + text-shadow: $i#{$l}-text-shadow-hover; + } + + @if $i#{$l}-height-natural != undefined { + @if $i#{$l}-border-width-hover != undefined { + height: $i#{$l}-height-natural - nth($i#{$l}-border-width-hover, 1) - nth($i#{$l}-border-width-hover, 3); + } + } + @if $i#{$l}-line-height-natural != undefined { + @if $i#{$l}-border-width-hover != undefined { + line-height: $i#{$l}-line-height-natural - nth($i#{$l}-border-width-hover, 1) - nth($i#{$l}-border-width-hover, 3); + } + } + } + &.folder .tag { + padding-right: 12px; + @if $i#{$l}-arrow-color-hover != undefined { + @if $u#{$l + 1}-type == dropup { + background: image-url('images/menus/arrow_up.png', $dst-color: $i#{$l}-arrow-color-hover) no-repeat right center; + } @else if $u#{$l + 1}-type == dropright { + background: image-url('images/menus/arrow_right.png', $dst-color: $i#{$l}-arrow-color-hover) no-repeat right center; + } @else if $u#{$l + 1}-type == dropleft { + background: image-url('images/menus/arrow_left.png', $dst-color: $i#{$l}-arrow-color-hover) no-repeat right center; + } @else { + background: image-url('images/menus/arrow_down.png', $dst-color: $i#{$l}-arrow-color-hover) no-repeat right center; + } + } + } + @if $i#{$l}-background-hover != undefined { + @if $i#{$l}-background-hover != $i#{$l}-background-hover-rgb and $i#{$l}-background-hover-rgb != undefined { + background: $i#{$l}-background-hover-rgb; + } + background: $i#{$l}-background-hover; + } + @if $i#{$l}-background-color-hover != undefined { + @if $i#{$l}-background-color-hover != $i#{$l}-background-color-hover-rgb and $i#{$l}-background-color-hover-rgb != undefined { + background-color: $i#{$l}-background-color-hover-rgb; + } + background-color: $i#{$l}-background-color-hover; + } + @if $i#{$l}-background-image-hover != undefined { + background-image: $i#{$l}-background-image-hover; + } + + @if $i#{$l}-box-shadow-hover != undefined { + box-shadow: $i#{$l}-box-shadow-hover; + } + + @if $i#{$l}-border-width-hover != undefined { + border-width: $i#{$l}-border-width-hover; + border-style: solid; + } + @if $i#{$l}-border-color-hover != undefined { + @if $i#{$l}-border-color-hover != $i#{$l}-border-color-hover-rgb and $i#{$l}-border-color-hover-rgb != undefined { + border-color: $i#{$l}-border-color-hover-rgb; + } + border-color: $i#{$l}-border-color-hover; + } + + @if $i#{$l}-border-radius-hover { + border-radius: $i#{$l}-border-radius-hover; + } + } + } + + /* Natural state: */ + li.l#{$l} { + /****** Structure Starts ******/ + position: relative; + + display: inline-block; + *vertical-align: middle; // IE fix + /****** Structure Ends ******/ + + z-index: 50; + + &:hover { + z-index: 100; // This pushes down the currently focused/hovered item, so the rounded sides go below the menus on its sides. + } + + &::before, + a.l#{$l}::before, + .a.l#{$l}::before, + &::after, + a.l#{$l}::after, + .a.l#{$l}::after { + display: none; + } + /****** Structure Ends ******/ + + a.l#{$l}, + .a.l#{$l} { + /****** Structure Starts ******/ + display: inline-block; + img.icon { + vertical-align: middle; + @if $i#{$l}-icon-size-natural != undefined { + width: $i#{$l}-icon-size-natural; + height: $i#{$l}-icon-size-natural; + } + } + .tag { + vertical-align: middle; + } + /****** Structure Ends ******/ + + background-clip: padding-box; + @if $i#{$l}-background-natural != undefined { + @if $i#{$l}-background-natural != $i#{$l}-background-natural-rgb and $i#{$l}-background-natural-rgb != undefined { + background: $i#{$l}-background-natural-rgb; + } + background: $i#{$l}-background-natural; + } + @if $i#{$l}-background-color-natural != undefined { + @if $i#{$l}-background-color-natural != $i#{$l}-background-color-natural-rgb and $i#{$l}-background-color-natural-rgb != undefined { + background-color: $i#{$l}-background-color-natural-rgb; + } + background-color: $i#{$l}-background-color-natural; + } + @if $i#{$l}-background-image-natural != undefined { + background-image: $i#{$l}-background-image-natural; + } + + @if $i#{$l}-box-shadow-natural != undefined { + box-shadow: $i#{$l}-box-shadow-natural; + } + + @if $i#{$l}-border-width-natural != undefined { + border-width: $i#{$l}-border-width-natural; + border-style: solid; + } + @if $i#{$l}-border-color-natural != undefined { + @if $i#{$l}-border-color-natural != $i#{$l}-border-color-natural-rgb and $i#{$l}-border-color-natural-rgb != undefined { + border-color: $i#{$l}-border-color-natural-rgb; + } + border-color: $i#{$l}-border-color-natural; + } + + @if $i#{$l}-border-radius-natural != undefined { + border-radius: $i#{$l}-border-radius-natural; + } + + @if $i#{$l}-margin-natural != undefined { + margin: $i#{$l}-margin-natural; + } + .label { + /****** Structure Starts ******/ + @if not $i#{$l}-word-wrap { + white-space: nowrap; + } + display: inline-block; + /****** Structure Ends ******/ + + @if $i#{$l}-margin-natural != undefined { + @if $i#{$l}-border-width-natural != undefined { + margin: -($i#{$l}-margin-natural + $i#{$l}-border-width-natural); + } @else { + margin: -($i#{$l}-margin-natural); + } + } @else if $i#{$l}-border-width-natural != undefined { + margin: -($i#{$l}-border-width-natural); + } + + text-decoration: none; + @if $i#{$l}-font-size-natural != undefined { + font-size: $i#{$l}-font-size-natural; + } + @if $i#{$l}-color-natural != undefined { + @if $i#{$l}-color-natural != $i#{$l}-color-natural-rgb and $i#{$l}-color-natural-rgb != undefined { + color: $i#{$l}-color-natural-rgb; + } + color: $i#{$l}-color-natural; + } + @if $i#{$l}-text-shadow-natural != undefined { + text-shadow: $i#{$l}-text-shadow-natural; + } + + @if $i#{$l}-padding-natural != undefined { + padding: $i#{$l}-padding-natural; + } + + @if $i#{$l}-height-natural != undefined { + @if $i#{$l}-border-width-natural != undefined { + height: $i#{$l}-height-natural - nth($i#{$l}-border-width-natural, 1) - nth($i#{$l}-border-width-natural, 3); + } @else { + height: $i#{$l}-height-natural; + } + } + @if $i#{$l}-line-height-natural != undefined { + @if $i#{$l}-border-width-natural != undefined { + line-height: $i#{$l}-line-height-natural - nth($i#{$l}-border-width-natural, 1) - nth($i#{$l}-border-width-natural, 3); + } @else { + line-height: $i#{$l}-line-height-natural; + } + } + } +// &:active .label, +// &:focus .label { +// text-decoration: underline; +// } + &.center .label { + text-align: center; + } + &.folder { + .label { + @if $i#{$l}-height-natural != undefined { + @if $i#{$l}-border-width-folder != undefined { + height: $i#{$l}-height-natural - nth($i#{$l}-border-width-folder, 1) - nth($i#{$l}-border-width-folder, 3); + } + } + @if $i#{$l}-line-height-natural != undefined { + @if $i#{$l}-border-width-folder != undefined { + line-height: $i#{$l}-line-height-natural - nth($i#{$l}-border-width-folder, 1) - nth($i#{$l}-border-width-folder, 3); + } + } + } + .tag { + padding-right: 12px; + @if $i#{$l}-arrow-color-natural != undefined { + @if $u#{$l + 1}-type == dropup { + background: image-url('images/menus/arrow_up.png', $dst-color: $i#{$l}-arrow-color-natural) no-repeat right center; + } @else if $u#{$l + 1}-type == dropright { + background: image-url('images/menus/arrow_right.png', $dst-color: $i#{$l}-arrow-color-natural) no-repeat right center; + } @else if $u#{$l + 1}-type == dropleft { + background: image-url('images/menus/arrow_left.png', $dst-color: $i#{$l}-arrow-color-natural) no-repeat right center; + } @else { + background: image-url('images/menus/arrow_down.png', $dst-color: $i#{$l}-arrow-color-natural) no-repeat right center; + } + } + } + } + } +// &.folder.focused, + &.folder.hover, + &.folder:hover { + a.l#{$l}, + .a.l#{$l} { + @if $i#{$l}-margin-folder != undefined { + margin: $i#{$l}-margin-folder; // Margin that sends the button downwards + } + .label { + @if $i#{$l}-margin-folder != undefined { + @if $i#{$l}-border-width-folder != undefined { + margin: -($i#{$l}-margin-folder + $i#{$l}-border-width-folder); + } @else if $i#{$l}-border-width-natural != undefined { + margin: -($i#{$l}-margin-folder + $i#{$l}-border-width-natural); + } @else { + margin: -($i#{$l}-margin-folder); + } + } @else if $i#{$l}-border-width-folder != undefined { + @if $i#{$l}-margin-natural != undefined { + margin: -($i#{$l}-margin-natural + $i#{$l}-border-width-folder); + } @else { + margin: -($i#{$l}-border-width-folder); + } + } + } + + @if $i#{$l}-box-shadow-folder != undefined { + box-shadow: $i#{$l}-box-shadow-folder; + } + + @if $i#{$l}-border-width-folder != undefined { + border-width: $i#{$l}-border-width-folder; + border-style: solid; + } + @if $i#{$l}-border-color-folder != undefined { + @if $i#{$l}-border-color-folder != $i#{$l}-border-color-folder-rgb and $i#{$l}-border-coor-folder-rgb != undefined { + border-color: $i#{$l}-border-color-folder-rgb; + } + border-color: $i#{$l}-border-color-folder; + } + + @if $i#{$l}-border-radius-folder != undefined { + border-radius: $i#{$l}-border-radius-folder; + } + + @if $i#{$l}-roundness-folder { + &::before { + @if $i#{$l}-border-radius-folder != undefined { + border-radius: 0; + } + border-bottom-right-radius: $i#{$l}-roundness-folder; + background-position: center 0; + } + &::after { + @if $i#{$l}-border-radius-folder != undefined { + border-radius: 0; + } + border-bottom-left-radius: $i#{$l}-roundness-folder; + background-position: center 0; + } + } + } + } + } + } + } +} + +@mixin _menu-vertical($level) { + $l: $level; + + ul.l#{$l} { + margin: 0; + padding: 0; + list-style: none; + + @if $u#{$l}-padding-natural != undefined { + padding: $u#{$l}-padding-natural; + } + @if $u#{$l}-margin-natural != undefined { + margin: $u#{$l}-margin-natural; + } + + background-clip: padding-box; + @if $u#{$l}-background-natural != undefined { + @if $u#{$l}-background-natural != $u#{$l}-background-natural-rgb and $u#{$l}-background-natural-rgb != undefined { + background: $u#{$l}-background-natural-rgb; + } + background: $u#{$l}-background-natural; + } + @if $u#{$l}-background-color-natural != undefined { + @if $u#{$l}-background-color-natural != $u#{$l}-background-color-natural-rgb and $u#{$l}-background-color-natural-rgb != undefined { + background-color: $u#{$l}-background-color-natural-rgb; + } + background-color: $u#{$l}-background-natural; + } + @if $u#{$l}-background-image-natural != undefined { + background-image: $u#{$l}-background-image-natural; + } + + @if $u#{$l}-box-shadow-natural != undefined { + box-shadow: $u#{$l}-box-shadow-natural; + } + + @if $u#{$l}-border-width-natural != undefined { + border-width: $u#{$l}-border-width-natural; + border-style: solid; + } + @if $u#{$l}-border-color-natural != undefined { + @if $u#{$l}-border-color-natural != $u#{$l}-border-color-natural-rgb and $u#{$l}-border-color-natural-rgb != undefined { + border-color: $u#{$l}-border-color-natural-rgb; + } + border-color: $u#{$l}-border-color-natural; + } + + @if $u#{$l}-border-radius-natural != undefined { + border-radius: $u#{$l}-border-radius-natural; + } + + transition: background 1s; + +// &.focused, + &.hover, + &:hover { + @if $u#{$l}-background-hover != undefined { + @if $u#{$l}-background-hover != $u#{$l}-background-hover-rgb and $u#{$l}-background-hover-rgb != undefined { + background: $u#{$l}-background-hover-rgb; + } + background: $u#{$l}-background-hover; + } + @if $u#{$l}-background-color-hover != undefined { + @if $u#{$l}-background-color-hover != $u#{$l}-background-color-hover-rgb and $u#{$l}-background-color-hover-rgb != undefined { + background-color: $u#{$l}-background-color-hover-rgb; + } + background-color: $u#{$l}-background-hover; + } + @if $u#{$l}-background-image-hover != undefined { + background-image: $u#{$l}-background-image-hover; + } + } + +// &.focused, + &.hover, + &:hover, + & { + /* Hovered/selected state: */ +// li.l#{$l}.focused, + li.l#{$l}.hover, + li.l#{$l}:hover { + a.l#{$l}, + .a.l#{$l} { + @if $i#{$l}-background-hover != undefined { + @if $i#{$l}-background-hover != $i#{$l}-background-hover-rgb and $i#{$l}-background-hover-rgb != undefined { + background: $i#{$l}-background-hover-rgb; + } + background: $i#{$l}-background-hover; + } + @if $i#{$l}-background-color-hover != undefined { + @if $i#{$l}-background-color-hover != $i#{$l}-background-color-hover-rgb and $i#{$l}-background-color-hover-rgb != undefined { + background-color: $i#{$l}-background-color-hover-rgb; + } + background-color: $i#{$l}-background-color-hover; + } + @if $i#{$l}-background-image-hover != undefined { + background-image: $i#{$l}-background-image-hover; + } + + @if $i#{$l}-box-shadow-hover != undefined { + box-shadow: $i#{$l}-box-shadow-hover; + } + + @if $i#{$l}-border-width-hover != undefined { + border-width: $i#{$l}-border-width-hover; + border-style: solid; + } + @if $i#{$l}-border-color-hover != undefined { + @if $i#{$l}-border-color-hover != $i#{$l}-border-color-hover-rgb and $i#{$l}-border-color-hover-rgb != undefined { + border-color: $i#{$l}-border-color-hover-rgb; + } + border-color: $i#{$l}-border-color-hover; + } + + @if $i#{$l}-border-radius-hover != undefined { + border-radius: $i#{$l}-border-radius-hover; + } + + .label { + @if $i#{$l}-color-hover != undefined { + @if $i#{$l}-color-hover != $i#{$l}-color-hover-rgb and $i#{$l}-color-hover-rgb != undefined { + color: $i#{$l}-color-hover-rgb; + } + color: $i#{$l}-color-hover; + } + @if $i#{$l}-text-shadow-hover != undefined { + text-shadow: $i#{$l}-text-shadow-hover; + } + } + } + } + li.l#{$l}.current { + a.l#{$l}, + .a.l#{$l} { + @if $i#{$l}-background-current != undefined { + @if $i#{$l}-background-current != $i#{$l}-background-current-rgb and $i#{$l}-background-current-rgb != undefined { + background: $i#{$l}-background-current-rgb; + } + background: $i#{$l}-background-current; + } + @if $i#{$l}-background-color-current != undefined { + @if $i#{$l}-background-color-current != $i#{$l}-background-color-current-rgb and $i#{$l}-background-color-current-rgb != undefined { + background-color: $i#{$l}-background-color-current-rgb; + } + background-color: $i#{$l}-background-color-current; + } + @if $i#{$l}-background-image-current != undefined { + background-image: $i#{$l}-background-image-current; + } + + @if $i#{$l}-box-shadow-current != undefined { + box-shadow: $i#{$l}-box-shadow-current; + } + + @if $i#{$l}-border-width-current != undefined { + border-width: $i#{$l}-border-width-current; + border-style: solid; + } + @if $i#{$l}-border-color-current != undefined { + @if $i#{$l}-border-color-current != $i#{$l}-border-color-current-rgb and $i#{$l}-border-color-current-rgb != undefined { + border-color: $i#{$l}-border-color-current-rgb; + } + border-color: $i#{$l}-border-color-current; + } + + @if $i#{$l}-border-radius-current != undefined { + border-radius: $i#{$l}-border-radius-current; + } + + .label { + @if $i#{$l}-color-current != undefined { + @if $i#{$l}-color-current != $i#{$l}-color-current-rgb and $i#{$l}-color-current-rgb != undefined { + color: $i#{$l}-color-current-rgb; + } + color: $i#{$l}-color-current; + } + @if $i#{$l}-text-shadow-current != undefined { + text-shadow: $i#{$l}-text-shadow-current; + } + } + } + } + /* Natural state: */ + li.l#{$l} { + /****** Structure Starts ******/ + position: relative; + /****** Structure Ends ******/ + + z-index: 50; + + &:hover { + z-index: 100; // This pushes down the currently focused/hovered item, so the rounded sides go below the menus on its sides. + } + + @if $l > 1 { + padding: 0 6px; + } + margin: 2px 0; + &.first { + margin-top: 6px; + } + &.last { + margin-bottom: 6px; + } + + &.separator { + padding: 0; + font-size: 1px; /* IE */ + @if $i#{$l}-separator-width-natural != undefined { + @if $i#{$l}-separator-color-natural != undefined { + border-top: $i#{$l}-separator-width-natural solid $i#{$l}-separator-color-natural; // mimic separator + } + } + } + a.l#{$l}, + .a.l#{$l} { + /****** Structure Starts ******/ + display: inline-block; + img.icon { + vertical-align: middle; + @if $i#{$l}-icon-size-natural != undefined { + width: $i#{$l}-icon-size-natural; + height: $i#{$l}-icon-size-natural; + } + } + .tag { + vertical-align: middle; + } + /****** Structure Ends ******/ + + background-clip: padding-box; + @if $i#{$l}-background-natural != undefined { + @if $i#{$l}-background-natural != $i#{$l}-background-natural-rgb and $i#{$l}-background-natural-rgb != undefined { + background: $i#{$l}-background-natural-rgb; + } + background: $i#{$l}-background-natural; + } + @if $i#{$l}-background-color-natural != undefined { + @if $i#{$l}-background-color-natural != $i#{$l}-background-color-natural-rgb and $i#{$l}-background-color-natural-rgb != undefined { + background-color: $i#{$l}-background-color-natural-rgb; + } + background-color: $i#{$l}-background-color-natural; + } + @if $i#{$l}-background-image-natural != undefined { + background-image: $i#{$l}-background-image-natural; + } + + @if $i#{$l}-box-shadow-natural != undefined { + box-shadow: $i#{$l}-box-shadow-natural; + } + + @if $i#{$l}-border-width-natural != undefined { + border-width: $i#{$l}-border-width-natural; + border-style: solid; + } + @if $i#{$l}-border-color-natural != undefined { + @if $i#{$l}-border-color-natural != $i#{$l}-border-color-natural-rgb and $i#{$l}-border-color-natural-rgb != undefined { + border-color: $i#{$l}-border-color-natural-rgb; + } + border-color: $i#{$l}-border-color-natural; + } + + @if $i#{$l}-border-radius-natural != undefined { + border-radius: $i#{$l}-border-radius-natural; + } + + width: 100%; + + .label { + /****** Structure Starts ******/ + @if not $i#{$l}-word-wrap { + white-space: nowrap; + } + display: inline-block; + /****** Structure Ends ******/ + + text-decoration: none; + @if $i#{$l}-font-size-natural != undefined { + font-size: $i#{$l}-font-size-natural; + } + @if $i#{$l}-color-natural != undefined { + @if $i#{$l}-color-natural != $i#{$l}-color-natural-rgb and $i#{$l}-color-natural-rgb != undefined { + color: $i#{$l}-color-natural-rgb; + } + color: $i#{$l}-color-natural; + } + @if $i#{$l}-text-shadow-natural != undefined { + text-shadow: $i#{$l}-text-shadow-natural; + } + + @if $i#{$l}-padding-natural != undefined { + padding: $i#{$l}-padding-natural; + } + + @if $i#{$l}-height-natural != undefined { + @if $i#{$l}-border-width-natural != undefined { + height: $i#{$l}-height-natural - nth($i#{$l}-border-width-natural, 1) - nth($i#{$l}-border-width-natural, 3); + } @else { + height: $i#{$l}-height-natural; + } + } + @if $i#{$l}-line-height-natural != undefined { + @if $i#{$l}-border-width-natural != undefined { + line-height: $i#{$l}-line-height-natural - nth($i#{$l}-border-width-natural, 1) - nth($i#{$l}-border-width-natural, 3); + } @else { + line-height: $i#{$l}-line-height-natural; + } + } + } +// &:active .label, +// &:focus .label { +// text-decoration: underline; +// } + &.center .label { + text-align: center; + } + } + } + } + } +} + +@mixin _menu-inplace($level) { + $l: $level; + + $u#{$l}-padding-natural: 2px 10px !default; + $u#{$l}-margin-natural: 2px 0 0 0 !default; + + @include _menu-vertical($l); + + .built-menu.l#{$l} { + display: block; + ul.l#{$l} { + @if $i#{$l}-separator-width-natural != undefined { + @if $i#{$l}-separator-color-natural != undefined { + border-top: $i#{$l}-separator-width-natural solid $i#{$l}-separator-color-natural; // mimic separator + } + } + } + } +} + + +@mixin _menu-accordion($level) { + $l: $level; + + $u#{$l}-padding-natural: 0 0 !default; + $u#{$l}-margin-natural: 2px 10px 0 !default; + + @include _menu-vertical($l); + + .built-menu.l#{$l} { + ul.l#{$l} { + @if $i#{$l}-separator-width-natural != undefined { + @if $i#{$l}-separator-color-natural != undefined { + border-top: $i#{$l}-separator-width-natural solid $i#{$l}-separator-color-natural; // mimic separator + } + } + } + } +} + +@mixin _menu-dropdown($level) { + $l: $level; + + $u#{$l}-box-shadow-natural: rgba(black, 12%) 0 2px 4px !default; + $u#{$l}-background-natural: white !default; + + @include _menu-vertical($l); + + .built-menu.l#{$l} { + position: absolute; + padding: 5px 30px 30px; + margin: -5px -30px -30px; + @if $i#{$l - 1}-height-natural != undefined { + top: $i#{$l}-height-natural - nth($i#{$l}-margin-folder, 1); + } + ul.l#{$l} { + li.l#{$l}.first { + margin-top: 4px !important; + } + li.l#{$l}.last { + margin-bottom: 4px !important; + } + } + } +} + +@mixin _menu-dropup($level) { + $l: $level; + + $u#{$l}-box-shadow-natural: rgba(black, 12%) 0 2px 4px !default; + $u#{$l}-background-natural: white !default; + + @include _menu-vertical($l); + + .built-menu.l#{$l} { + position: absolute; + padding: 30px 30px 5px; + margin: -30px -30px -5px; + @if $i#{$l - 1}-height-natural != undefined { + bottom: $i#{$l - 1}-height-natural; + } @else { + bottom: 1em; + } + ul.l#{$l} { + li.l#{$l}.first { + margin-top: 4px !important; + } + li.l#{$l}.last { + margin-bottom: 4px !important; + } + } + } +} + +@mixin _menu-dropright($level) { + $l: $level; + + $u#{$l}-box-shadow-natural: rgba(black, 12%) 0 2px 4px !default; + $u#{$l}-background-natural: white !default; + + @include _menu-vertical($l); + + .built-menu.l#{$l} { + position: absolute; + padding: 30px 30px 30px 5px; + margin: -30px -30px -30px -5px; + top: 0; + left: 90%; + ul.l#{$l} { + li.l#{$l}.first { + margin-top: 4px !important; + } + li.l#{$l}.last { + margin-bottom: 4px !important; + } + } + } +} + +@mixin _menu-dropleft($level) { + $l: $level; + + $u#{$l}-box-shadow-natural: rgba(black, 12%) 0 2px 4px !default; + $u#{$l}-background-natural: white !default; + + @include _menu-vertical($l); + + .built-menu.l#{$l} { + position: absolute; + padding: 30px 30px 30px 5px; + margin: -30px -30px -30px -5px; + top: 0; + right: 90%; + ul.l#{$l} { + li.l#{$l}.first { + margin-top: 4px !important; + } + li.l#{$l}.last { + margin-bottom: 4px !important; + } + } + } +} + +@mixin menu() { + /****** Structure Starts ******/ + // Multilevel menu show/hide: + .built-menu .built-menu { + display: none; + } + @for $l from 1 through $default-menu-levels { +// li.l#{$l}.focused .built-menu.l#{$l + 1}, + li.l#{$l}.hover .built-menu.l#{$l + 1}, + li.l#{$l}:hover .built-menu.l#{$l + 1} { + display: block; + } + } + // Hide pre/post items by default: + li.pre_items, + li.post_items { + display: none !important; + } + /****** Structure Ends ******/ + + // Get default parameters: + $params: 'color', 'text-shadow', 'font-size', 'background', 'background-color', 'background-image', + 'border-width', 'border-color', 'border-radius', + 'box-shadow', + 'padding', 'margin', 'margin-folder', + 'border-width-folder', 'border-color-folder', 'border-radius-folder', + 'roundness', 'roundness-folder', + 'roundness-background', 'roundness-background-image', + 'height', 'line-height', + 'separator-color', 'separator-width', + 'arrow-color', 'icon-size', 'keep-current', 'word-wrap'; + $sufixes: '', '-natural', '-hover', '-current'; + $prefixes: 'u', 'i'; + @for $l from 1 through $default-menu-levels { + @each $param in $params { + @each $s in $sufixes { + @each $p in $prefixes { + $final: undefined; + @each $n in $l, 0, -1 { + @if $final == undefined { + $final: first-value-of( + $#{$p}#{$n}-#{$param}#{$s}, + $#{$p}#{$n}-#{$param}, + $#{$param}#{$s}, + $#{$param} + ); + } + } + @if $final != undefined { + $#{$p}#{$l}-#{$param}#{$s}: $final !default; + @if type-of($final) == 'color' { + $#{$p}#{$l}-#{$param}#{$s}-rgb: rgb($final) !default; + } + } + } + } + } + } + + // Default values: + $u1-type: horizontal !default; + $u2-type: dropdown !default; + $u3-type: inplace !default; + + $icon-size-natural: 20px !default; + + $i1-padding-natural: 0 12px !default; + $i2-padding-natural: 2px 6px !default; + $i3-padding-natural: 2px 6px !default; + + @for $l from 1 through $default-menu-levels { + $i#{$l}-separator-width-natural: 1px !default; + $i#{$l}-color-natural: blue !default; + $i#{$l}-color-hover: red !default; + $i#{$l}-color-current: red !default; + $i#{$l}-arrow-color-natural: $i#{$l}-color-natural !default; + $i#{$l}-arrow-color-hover: $i#{$l}-color-hover !default; + $i#{$l}-arrow-color-current: $i#{$l}-color-current !default; + $i#{$l}-word-wrap: false !default; + } + + @for $l from 1 through $default-menu-levels { + $type: '_menu-' + $u#{$l}-type; + @include #{$type}($level: $l); + } +} diff --git a/scss/tests/files/kronuz/linear-gradient.css b/scss/tests/files/kronuz/linear-gradient.css new file mode 100644 index 0000000..f940354 --- /dev/null +++ b/scss/tests/files/kronuz/linear-gradient.css @@ -0,0 +1,3 @@ +div { + background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%); +} \ No newline at end of file diff --git a/scss/tests/files/kronuz/linear-gradient.scss b/scss/tests/files/kronuz/linear-gradient.scss new file mode 100644 index 0000000..3681159 --- /dev/null +++ b/scss/tests/files/kronuz/linear-gradient.scss @@ -0,0 +1,3 @@ +div { + background: linear-gradient(top, #4d4d4d 0%,#3f3f3f 50%,#333333 50%,#252525 100%); +} diff --git a/scss/tests/files/kronuz/menu.css b/scss/tests/files/kronuz/menu.css new file mode 100644 index 0000000..6b1aef3 --- /dev/null +++ b/scss/tests/files/kronuz/menu.css @@ -0,0 +1,3 @@ +.bottommenu { + ... +} diff --git a/scss/tests/files/kronuz/menu.scss b/scss/tests/files/kronuz/menu.scss new file mode 100644 index 0000000..2c7c43d --- /dev/null +++ b/scss/tests/files/kronuz/menu.scss @@ -0,0 +1,32 @@ +@import "menu"; + +$MENUS-RADIUS: 2px; +$BASE-COLOR-HOVER: green; +$BASE-COLOR-SHADE: darkgreen; +$BOTTOMMENU-COLOR: #444; +$BOTTOMMENU-COLOR-HOVER: #222; +$BOTTOMMENU-COLOR-HOVER-CURRENT: #458; +$BOTTOMMENU-SUBMENU-BORDER-WIDTH: 2px; +$BOTTOMMENU-SUBMENU-BACKGROUND: white; + +.bottommenu { + @include menu( + $i0-height: 20px, + $i0-line-height: 20px, + $i0-border-radius: $MENUS-RADIUS, + $i0-border-radius-folder: $MENUS-RADIUS, + $i0-color: $BOTTOMMENU-COLOR, + $i0-color-hover: $BOTTOMMENU-COLOR-HOVER, + $i0-color-current: $BOTTOMMENU-COLOR-CURRENT, + $i0-background: none, + $i0-background-hover: $BASE-COLOR-HOVER, + $i0-separator-color: $BASE-COLOR-HOVER, + + $u2-type: dropup, + $u2-border-width: $BOTTOMMENU-SUBMENU-BORDER-WIDTH, + $u2-border-color: $BASE-COLOR-SHADE, + $u2-border-radius: $MENUS-RADIUS * 2, + $u2-background: rgba($BOTTOMMENU-SUBMENU-BACKGROUND, 90%), + $u2-background-hover: $BOTTOMMENU-SUBMENU-BACKGROUND, + ); +} diff --git a/scss/tests/files/kronuz/mul-em.css b/scss/tests/files/kronuz/mul-em.css new file mode 100644 index 0000000..c5603c7 --- /dev/null +++ b/scss/tests/files/kronuz/mul-em.css @@ -0,0 +1,3 @@ +div { + text-indent: -9229.846em; +} diff --git a/scss/tests/files/kronuz/mul-em.scss b/scss/tests/files/kronuz/mul-em.scss new file mode 100644 index 0000000..8c1f632 --- /dev/null +++ b/scss/tests/files/kronuz/mul-em.scss @@ -0,0 +1,5 @@ +div { + $approximate_em_value: 12px / 1em; + $wider_than_any_screen: -9999em; + text-indent: $wider_than_any_screen * $approximate_em_value; +} \ No newline at end of file diff --git a/scss/tests/files/kronuz/mul-list.css b/scss/tests/files/kronuz/mul-list.css new file mode 100644 index 0000000..f00c6d3 --- /dev/null +++ b/scss/tests/files/kronuz/mul-list.css @@ -0,0 +1,3 @@ +div { + margin: 0.6em 0 1.8em; +} diff --git a/scss/tests/files/kronuz/mul-list.scss b/scss/tests/files/kronuz/mul-list.scss new file mode 100644 index 0000000..f25c96c --- /dev/null +++ b/scss/tests/files/kronuz/mul-list.scss @@ -0,0 +1,3 @@ +div { + margin: (1em 0 3em) * 0.6; +} \ No newline at end of file diff --git a/scss/tests/files/kronuz/rgba-colors.css b/scss/tests/files/kronuz/rgba-colors.css new file mode 100644 index 0000000..c0532fd --- /dev/null +++ b/scss/tests/files/kronuz/rgba-colors.css @@ -0,0 +1,4 @@ +div { + color: rgba(0, 0, 0, 0.6); + background: black; +} \ No newline at end of file diff --git a/scss/tests/files/kronuz/rgba-colors.scss b/scss/tests/files/kronuz/rgba-colors.scss new file mode 100644 index 0000000..c33b2fc --- /dev/null +++ b/scss/tests/files/kronuz/rgba-colors.scss @@ -0,0 +1,4 @@ +div { + color: rgba(black, 60%); + background: rgba(black, 100%); +} diff --git a/scss/tests/files/kronuz/sprite-map.css b/scss/tests/files/kronuz/sprite-map.css new file mode 100644 index 0000000..a746154 --- /dev/null +++ b/scss/tests/files/kronuz/sprite-map.css @@ -0,0 +1,13 @@ +.mod { + background: url(/static/assets/squares-YG8x25OkL4axeoTN5hv6YA.png) no-repeat; +} +.mod.ten-by-ten { + width: 10px; + height: 10px; + background-position: 0px 0px; +} +.mod.twenty-by-twenty { + width: 20px; + height: 20px; + background-position: 0px -20px; +} diff --git a/scss/tests/files/kronuz/sprite-map.scss b/scss/tests/files/kronuz/sprite-map.scss new file mode 100644 index 0000000..a1f6bc0 --- /dev/null +++ b/scss/tests/files/kronuz/sprite-map.scss @@ -0,0 +1,19 @@ +@option compress:no; + +$images: sprite-map("squares/*.png", $cache-buster: false); + +.mod { + background: $images; + &.ten-by-ten { + $file: sprite-file($images, "ten-by-ten"); + width: image-width($file); + height: image-height($file); + background-position: sprite-position($images, "ten-by-ten"); + } + &.twenty-by-twenty { + $file: sprite-file($images, "twenty-by-twenty"); + width: image-width($file); + height: image-height($file); + background-position: sprite-position($images, "twenty-by-twenty"); + } +} diff --git a/scss/tests/files/kronuz/static/assets/.placeholder b/scss/tests/files/kronuz/static/assets/.placeholder new file mode 100644 index 0000000..e69de29 diff --git a/scss/tests/files/kronuz/static/squares/ten-by-ten.png b/scss/tests/files/kronuz/static/squares/ten-by-ten.png new file mode 100644 index 0000000..4b6d847 Binary files /dev/null and b/scss/tests/files/kronuz/static/squares/ten-by-ten.png differ diff --git a/scss/tests/files/kronuz/static/squares/twenty-by-twenty.png b/scss/tests/files/kronuz/static/squares/twenty-by-twenty.png new file mode 100644 index 0000000..99253fb Binary files /dev/null and b/scss/tests/files/kronuz/static/squares/twenty-by-twenty.png differ -- cgit v1.2.1