123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308 |
- // /**
- // * Copyright © Magento, Inc. All rights reserved.
- // * See COPYING.txt for license details.
- // */
- // ==============================================
- // Generated content icon helpers
- // ----------------------------------------------
- // These can only be used on block or inline-block elements.
- // ==============================================
- // Non-sprited icons --------------------------------
- .prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px ) when (@using-modernizr) {
- .generatedcontent & {
- position: relative;
- padding-left: @width + @pad;
- }
- .generatedcontent &:before {
- ._generated-icon( @width, @height, @icon-image );
- top: @nudge-top;
- left: @nudge-left;
- }
- }
- .prepend-icon( @icon-image, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px ) when not (@using-modernizr) {
- position: relative;
- padding-left: @width + @pad;
- &:before {
- ._generated-icon( @width, @height, @icon-image );
- top: @nudge-top;
- left: @nudge-left;
- }
- }
- .append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px ) when (@using-modernizr) {
- .generatedcontent & {
- position: relative;
- padding-right: @width + @pad;
- }
- .generatedcontent &:after {
- ._generated-icon( @width, @height, @icon-image );
- top: @nudge-top;
- right: @nudge-right;
- }
- }
- .append-icon( @icon-image, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px ) when not (@using-modernizr) {
- position: relative;
- padding-right: @width + @pad;
- .generatedcontent &:after {
- ._generated-icon( @width, @height, @icon-image );
- top: @nudge-top;
- right: @nudge-right;
- }
- }
- // Sprited icons --------------------------------
- .prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
- .generatedcontent & {
- position: relative;
- padding-left: @width + @pad;
- }
- .generatedcontent &:before {
- ._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
- top: @nudge-top;
- left: @nudge-left;
- }
- }
- .prepend-sprite-icon(@x, @y, @width, @height, @nudge-left:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
- position: relative;
- padding-left: @width + @pad;
- &:before {
- ._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
- top: @nudge-top;
- left: @nudge-left;
- }
- }
- .append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when (@using-modernizr) {
- .generatedcontent & {
- padding-right: @width + @pad;
- position: relative;
- }
- .generatedcontent &:after {
- ._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
- top: @nudge-top;
- right: @nudge-right;
- }
- }
- .append-sprite-icon(@x, @y, @width, @height, @nudge-right:0, @nudge-top:0, @pad:10px, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
- position: relative;
- padding-right: @width + @pad;
- &:after {
- ._generated-sprite-icon( @x, @y, @width, @height, @sprite-image, @sprite-grid );
- top: @nudge-top;
- right: @nudge-right;
- }
- }
- .prepend-sprite-icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
- .generatedcontent &:before {
- .sprite-pos(@x, @y, @sprite-grid);
- .nudge-l(@nudge-left);
- .nudge-t(@nudge-top);
- }
- }
- .prepend-sprite-icon-pos(@x, @y, @nudge-left:0, @nudge-top:0, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
- &:before {
- .sprite-pos(@x, @y, @sprite-grid);
- .nudge-l(@nudge-left);
- .nudge-t(@nudge-top);
- }
- }
- .append-sprite-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when (@using-modernizr) {
- .generatedcontent &:after {
- .sprite-pos(@x, @y, @sprite-grid);
- .nudge-r(@nudge-right);
- .nudge-t(@nudge-top);
- }
- }
- .append-sprite-icon-pos(@x, @y, @nudge-right:0, @nudge-top:0, @sprite-grid:@sprite-grid) when not (@using-modernizr) {
- &:after {
- .sprite-pos(@x, @y, @sprite-grid);
- .nudge-r(@nudge-right);
- .nudge-t(@nudge-top);
- }
- }
- // ---- Partials -----------------------
- .prepend-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
- .generatedcontent & {
- position: relative;
- ._pad-left(@width, @pad);
- }
- .generatedcontent &:before {
- position: absolute;
- display: block;
- content: ' ';
- top: 0;
- left: 0;
- ._size(@width, @height);
- }
- }
- .prepend-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
- position: relative;
- ._pad-left(@width, @pad);
- &:before {
- position: absolute;
- display: block;
- content: ' ';
- top: 0;
- left: 0;
- ._size(@width, @height);
- }
- }
- .append-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
- .generatedcontent & {
- position: relative;
- ._pad-right(@width, @pad);
- }
- .generatedcontent &:after {
- position: absolute;
- display: block;
- content: ' ';
- top: 0;
- right: 0;
- ._size(@width, @height);
- }
- }
- .append-icon-setup(@width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
- position: relative;
- ._pad-right(@width, @pad);
- &:after {
- position: absolute;
- display: block;
- content: ' ';
- top: 0;
- right: 0;
- ._size(@width, @height);
- }
- }
- .prepend-icon-image(@icon-image, @width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
- ._gc-pad-left(@width, @pad);
- .generatedcontent &:before {
- background: url(@icon-image) no-repeat 0 0;
- ._size(@width, @height);
- .nudge-l(@nudge-left);
- .nudge-t(@nudge-top);
- }
- }
- .prepend-icon-image(@icon-image, @width:0, @height:0, @nudge-left:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
- ._pad-left(@width, @pad);
- &:before {
- background: url(@icon-image) no-repeat 0 0;
- ._size(@width, @height);
- .nudge-l(@nudge-left);
- .nudge-t(@nudge-top);
- }
- }
- .append-icon-image(@icon-image, @width:0, @height:0, @nudge-right:0, @nudge-top:0, @pad:10px) when (@using-modernizr) {
- ._gc-pad-right(@width, @pad);
- .generatedcontent &:after {
- background: url(@icon-image) no-repeat 0 0;
- ._size(@width, @height);
- .nudge-r(@nudge-right);
- .nudge-t(@nudge-top);
- }
- }
- .append-icon-image(@icon-image, @width:0, @height:0, @nudge-right:0, @nudge-top:0, @pad:10px) when not (@using-modernizr) {
- ._pad-right(@width, @pad);
- &:after {
- background: url(@icon-image) no-repeat 0 0;
- ._size(@width, @height);
- .nudge-r(@nudge-right);
- .nudge-t(@nudge-top);
- }
- }
- // ---- internal use mixins -----------------------
- ._generated-icon(@width, @height, @icon-image) {
- position: absolute;
- display: block;
- content: ' ';
- background: url(@icon-image) no-repeat 0 0;
- .size(@width, @height);
- }
- ._generated-sprite-icon(@x, @y, @width, @height, @sprite-image:@sprite-image, @sprite-grid:@sprite-grid) {
- position: absolute;
- display: block;
- content: ' ';
- .sprite-sized(@x, @y, @width, @height, @sprite-image, @sprite-grid);
- }
- ._pad-left(@width, @pad) when (@width = 0) {
- }
- ._pad-left(@width, @pad) when not (@width = 0) {
- padding-left: @width + @pad;
- }
- ._pad-right(@width, @pad) when (@width = 0) {
- }
- ._pad-right(@width, @pad) when not (@width = 0) {
- padding-right: @width + @pad;
- }
- ._gc-pad-left(@width, @pad) when (@width = 0) {
- }
- ._gc-pad-right(@width, @pad) when (@width = 0) {
- }
- ._gc-pad-left(@width, @pad) when not (@width = 0) and (@using-modernizr) {
- .generatedcontent & {
- ._pad-left(@width, @pad);
- }
- }
- ._gc-pad-left(@width, @pad) when not (@width = 0) and not (@using-modernizr) {
- ._pad-left(@width, @pad);
- }
- ._gc-pad-right(@width, @pad) when not (@width = 0) {
- .generatedcontent & {
- ._pad-right(@width, @pad);
- }
- }
- ._gc-pad-right(@width, @pad) when not (@width = 0) and not (@using-modernizr) {
- ._pad-right(@width, @pad);
- }
- ._size(@width, @height) when (@width = 0) and (@height = 0) {
- }
- ._size(@width, @height) when (@width = 0) and not (@height = 0) {
- height: @height;
- }
- ._size(@width, @height) when not (@width = 0) and (@height = 0) {
- width: @width;
- }
- ._size(@width, @height) when not (@width = 0) and not (@height = 0) {
- width: @width;
- height: @height;
- }
|