dlstatic / static-pnr · Files

/*
LESS variables are information about icon's compiled state, stored under its original file name

.icon-home {
  width: @icon-home-width;
}

The large array-like variables contain all information about a single icon
@icon-home: x y offset_x offset_y width height total_width total_height image_path name;

At the bottom of this section, we provide information about the spritesheet itself
@spritesheet: width height image @spritesheet-sprites;
*/
@icon-copper-mini-name: 'icon-copper-mini';
@icon-copper-mini-x: 228px;
@icon-copper-mini-y: 162px;
@icon-copper-mini-offset-x: -228px;
@icon-copper-mini-offset-y: -162px;
@icon-copper-mini-width: 20px;
@icon-copper-mini-height: 20px;
@icon-copper-mini-total-width: 325px;
@icon-copper-mini-total-height: 288px;
@icon-copper-mini-image: '../images/2.3.0/dist/sprite.png';
@icon-copper-mini: 228px 162px -228px -162px 20px 20px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-copper-mini';
@icon-gold-mini-name: 'icon-gold-mini';
@icon-gold-mini-x: 228px;
@icon-gold-mini-y: 86px;
@icon-gold-mini-offset-x: -228px;
@icon-gold-mini-offset-y: -86px;
@icon-gold-mini-width: 20px;
@icon-gold-mini-height: 20px;
@icon-gold-mini-total-width: 325px;
@icon-gold-mini-total-height: 288px;
@icon-gold-mini-image: '../images/2.3.0/dist/sprite.png';
@icon-gold-mini: 228px 86px -228px -86px 20px 20px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-gold-mini';
@icon-gold-seller-name: 'icon-gold-seller';
@icon-gold-seller-x: 171px;
@icon-gold-seller-y: 238px;
@icon-gold-seller-offset-x: -171px;
@icon-gold-seller-offset-y: -238px;
@icon-gold-seller-width: 67px;
@icon-gold-seller-height: 16px;
@icon-gold-seller-total-width: 325px;
@icon-gold-seller-total-height: 288px;
@icon-gold-seller-image: '../images/2.3.0/dist/sprite.png';
@icon-gold-seller: 171px 238px -171px -238px 67px 16px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-gold-seller';
@icon-home-mini-name: 'icon-home-mini';
@icon-home-mini-x: 228px;
@icon-home-mini-y: 112px;
@icon-home-mini-offset-x: -228px;
@icon-home-mini-offset-y: -112px;
@icon-home-mini-width: 20px;
@icon-home-mini-height: 20px;
@icon-home-mini-total-width: 325px;
@icon-home-mini-total-height: 288px;
@icon-home-mini-image: '../images/2.3.0/dist/sprite.png';
@icon-home-mini: 228px 112px -228px -112px 20px 20px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-home-mini';
@icon-icon-abletrunk-name: 'icon-icon-abletrunk';
@icon-icon-abletrunk-x: 0px;
@icon-icon-abletrunk-y: 162px;
@icon-icon-abletrunk-offset-x: 0px;
@icon-icon-abletrunk-offset-y: -162px;
@icon-icon-abletrunk-width: 70px;
@icon-icon-abletrunk-height: 70px;
@icon-icon-abletrunk-total-width: 325px;
@icon-icon-abletrunk-total-height: 288px;
@icon-icon-abletrunk-image: '../images/2.3.0/dist/sprite.png';
@icon-icon-abletrunk: 0px 162px 0px -162px 70px 70px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-icon-abletrunk';
@icon-icon-check-name: 'icon-icon-check';
@icon-icon-check-x: 255px;
@icon-icon-check-y: 76px;
@icon-icon-check-offset-x: -255px;
@icon-icon-check-offset-y: -76px;
@icon-icon-check-width: 70px;
@icon-icon-check-height: 70px;
@icon-icon-check-total-width: 325px;
@icon-icon-check-total-height: 288px;
@icon-icon-check-image: '../images/2.3.0/dist/sprite.png';
@icon-icon-check: 255px 76px -255px -76px 70px 70px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-icon-check';
@icon-icon-discheck-name: 'icon-icon-discheck';
@icon-icon-discheck-x: 0px;
@icon-icon-discheck-y: 86px;
@icon-icon-discheck-offset-x: 0px;
@icon-icon-discheck-offset-y: -86px;
@icon-icon-discheck-width: 70px;
@icon-icon-discheck-height: 70px;
@icon-icon-discheck-total-width: 325px;
@icon-icon-discheck-total-height: 288px;
@icon-icon-discheck-image: '../images/2.3.0/dist/sprite.png';
@icon-icon-discheck: 0px 86px 0px -86px 70px 70px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-icon-discheck';
@icon-icon-disgather-name: 'icon-icon-disgather';
@icon-icon-disgather-x: 76px;
@icon-icon-disgather-y: 86px;
@icon-icon-disgather-offset-x: -76px;
@icon-icon-disgather-offset-y: -86px;
@icon-icon-disgather-width: 70px;
@icon-icon-disgather-height: 70px;
@icon-icon-disgather-total-width: 325px;
@icon-icon-disgather-total-height: 288px;
@icon-icon-disgather-image: '../images/2.3.0/dist/sprite.png';
@icon-icon-disgather: 76px 86px -76px -86px 70px 70px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-icon-disgather';
@icon-icon-disshopcart-name: 'icon-icon-disshopcart';
@icon-icon-disshopcart-x: 152px;
@icon-icon-disshopcart-y: 86px;
@icon-icon-disshopcart-offset-x: -152px;
@icon-icon-disshopcart-offset-y: -86px;
@icon-icon-disshopcart-width: 70px;
@icon-icon-disshopcart-height: 70px;
@icon-icon-disshopcart-total-width: 325px;
@icon-icon-disshopcart-total-height: 288px;
@icon-icon-disshopcart-image: '../images/2.3.0/dist/sprite.png';
@icon-icon-disshopcart: 152px 86px -152px -86px 70px 70px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-icon-disshopcart';
@icon-icon-gather-name: 'icon-icon-gather';
@icon-icon-gather-x: 76px;
@icon-icon-gather-y: 162px;
@icon-icon-gather-offset-x: -76px;
@icon-icon-gather-offset-y: -162px;
@icon-icon-gather-width: 70px;
@icon-icon-gather-height: 70px;
@icon-icon-gather-total-width: 325px;
@icon-icon-gather-total-height: 288px;
@icon-icon-gather-image: '../images/2.3.0/dist/sprite.png';
@icon-icon-gather: 76px 162px -76px -162px 70px 70px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-icon-gather';
@icon-icon-label-name: 'icon-icon-label';
@icon-icon-label-x: 255px;
@icon-icon-label-y: 152px;
@icon-icon-label-offset-x: -255px;
@icon-icon-label-offset-y: -152px;
@icon-icon-label-width: 61px;
@icon-icon-label-height: 60px;
@icon-icon-label-total-width: 325px;
@icon-icon-label-total-height: 288px;
@icon-icon-label-image: '../images/2.3.0/dist/sprite.png';
@icon-icon-label: 255px 152px -255px -152px 61px 60px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-icon-label';
@icon-icon-shopcart-name: 'icon-icon-shopcart';
@icon-icon-shopcart-x: 152px;
@icon-icon-shopcart-y: 162px;
@icon-icon-shopcart-offset-x: -152px;
@icon-icon-shopcart-offset-y: -162px;
@icon-icon-shopcart-width: 70px;
@icon-icon-shopcart-height: 70px;
@icon-icon-shopcart-total-width: 325px;
@icon-icon-shopcart-total-height: 288px;
@icon-icon-shopcart-image: '../images/2.3.0/dist/sprite.png';
@icon-icon-shopcart: 152px 162px -152px -162px 70px 70px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-icon-shopcart';
@icon-icon-trunk-name: 'icon-icon-trunk';
@icon-icon-trunk-x: 255px;
@icon-icon-trunk-y: 0px;
@icon-icon-trunk-offset-x: -255px;
@icon-icon-trunk-offset-y: 0px;
@icon-icon-trunk-width: 70px;
@icon-icon-trunk-height: 70px;
@icon-icon-trunk-total-width: 325px;
@icon-icon-trunk-total-height: 288px;
@icon-icon-trunk-image: '../images/2.3.0/dist/sprite.png';
@icon-icon-trunk: 255px 0px -255px 0px 70px 70px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-icon-trunk';
@icon-invalid-mini-name: 'icon-invalid-mini';
@icon-invalid-mini-x: 26px;
@icon-invalid-mini-y: 268px;
@icon-invalid-mini-offset-x: -26px;
@icon-invalid-mini-offset-y: -268px;
@icon-invalid-mini-width: 20px;
@icon-invalid-mini-height: 20px;
@icon-invalid-mini-total-width: 325px;
@icon-invalid-mini-total-height: 288px;
@icon-invalid-mini-image: '../images/2.3.0/dist/sprite.png';
@icon-invalid-mini: 26px 268px -26px -268px 20px 20px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-invalid-mini';
@icon-menu-name: 'icon-menu';
@icon-menu-x: 228px;
@icon-menu-y: 214px;
@icon-menu-offset-x: -228px;
@icon-menu-offset-y: -214px;
@icon-menu-width: 16px;
@icon-menu-height: 15px;
@icon-menu-total-width: 325px;
@icon-menu-total-height: 288px;
@icon-menu-image: '../images/2.3.0/dist/sprite.png';
@icon-menu: 228px 214px -228px -214px 16px 15px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-menu';
@icon-no1-name: 'icon-no1';
@icon-no1-x: 0px;
@icon-no1-y: 0px;
@icon-no1-offset-x: 0px;
@icon-no1-offset-y: 0px;
@icon-no1-width: 79px;
@icon-no1-height: 80px;
@icon-no1-total-width: 325px;
@icon-no1-total-height: 288px;
@icon-no1-image: '../images/2.3.0/dist/sprite.png';
@icon-no1: 0px 0px 0px 0px 79px 80px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-no1';
@icon-no2-name: 'icon-no2';
@icon-no2-x: 170px;
@icon-no2-y: 0px;
@icon-no2-offset-x: -170px;
@icon-no2-offset-y: 0px;
@icon-no2-width: 79px;
@icon-no2-height: 80px;
@icon-no2-total-width: 325px;
@icon-no2-total-height: 288px;
@icon-no2-image: '../images/2.3.0/dist/sprite.png';
@icon-no2: 170px 0px -170px 0px 79px 80px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-no2';
@icon-no3-name: 'icon-no3';
@icon-no3-x: 85px;
@icon-no3-y: 0px;
@icon-no3-offset-x: -85px;
@icon-no3-offset-y: 0px;
@icon-no3-width: 79px;
@icon-no3-height: 80px;
@icon-no3-total-width: 325px;
@icon-no3-total-height: 288px;
@icon-no3-image: '../images/2.3.0/dist/sprite.png';
@icon-no3: 85px 0px -85px 0px 79px 80px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-no3';
@icon-people-name: 'icon-people';
@icon-people-x: 228px;
@icon-people-y: 138px;
@icon-people-offset-x: -228px;
@icon-people-offset-y: -138px;
@icon-people-width: 16px;
@icon-people-height: 16px;
@icon-people-total-width: 325px;
@icon-people-total-height: 288px;
@icon-people-image: '../images/2.3.0/dist/sprite.png';
@icon-people: 228px 138px -228px -138px 16px 16px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-people';
@icon-plus-name: 'icon-plus';
@icon-plus-x: 255px;
@icon-plus-y: 218px;
@icon-plus-offset-x: -255px;
@icon-plus-offset-y: -218px;
@icon-plus-width: 12px;
@icon-plus-height: 12px;
@icon-plus-total-width: 325px;
@icon-plus-total-height: 288px;
@icon-plus-image: '../images/2.3.0/dist/sprite.png';
@icon-plus: 255px 218px -255px -218px 12px 12px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-plus';
@icon-real-name-mini-name: 'icon-real-name-mini';
@icon-real-name-mini-x: 0px;
@icon-real-name-mini-y: 268px;
@icon-real-name-mini-offset-x: 0px;
@icon-real-name-mini-offset-y: -268px;
@icon-real-name-mini-width: 20px;
@icon-real-name-mini-height: 20px;
@icon-real-name-mini-total-width: 325px;
@icon-real-name-mini-total-height: 288px;
@icon-real-name-mini-image: '../images/2.3.0/dist/sprite.png';
@icon-real-name-mini: 0px 268px 0px -268px 20px 20px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-real-name-mini';
@icon-sliver-mini-name: 'icon-sliver-mini';
@icon-sliver-mini-x: 228px;
@icon-sliver-mini-y: 188px;
@icon-sliver-mini-offset-x: -228px;
@icon-sliver-mini-offset-y: -188px;
@icon-sliver-mini-width: 20px;
@icon-sliver-mini-height: 20px;
@icon-sliver-mini-total-width: 325px;
@icon-sliver-mini-total-height: 288px;
@icon-sliver-mini-image: '../images/2.3.0/dist/sprite.png';
@icon-sliver-mini: 228px 188px -228px -188px 20px 20px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-sliver-mini';
@icon-talk-name: 'icon-talk';
@icon-talk-x: 0px;
@icon-talk-y: 238px;
@icon-talk-offset-x: 0px;
@icon-talk-offset-y: -238px;
@icon-talk-width: 92px;
@icon-talk-height: 24px;
@icon-talk-total-width: 325px;
@icon-talk-total-height: 288px;
@icon-talk-image: '../images/2.3.0/dist/sprite.png';
@icon-talk: 0px 238px 0px -238px 92px 24px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-talk';
@icon-tip-angle-name: 'icon-tip-angle';
@icon-tip-angle-x: 273px;
@icon-tip-angle-y: 218px;
@icon-tip-angle-offset-x: -273px;
@icon-tip-angle-offset-y: -218px;
@icon-tip-angle-width: 6px;
@icon-tip-angle-height: 7px;
@icon-tip-angle-total-width: 325px;
@icon-tip-angle-total-height: 288px;
@icon-tip-angle-image: '../images/2.3.0/dist/sprite.png';
@icon-tip-angle: 273px 218px -273px -218px 6px 7px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-tip-angle';
@icon-wl-real-location-name: 'icon-wl-real-location';
@icon-wl-real-location-x: 98px;
@icon-wl-real-location-y: 238px;
@icon-wl-real-location-offset-x: -98px;
@icon-wl-real-location-offset-y: -238px;
@icon-wl-real-location-width: 67px;
@icon-wl-real-location-height: 16px;
@icon-wl-real-location-total-width: 325px;
@icon-wl-real-location-total-height: 288px;
@icon-wl-real-location-image: '../images/2.3.0/dist/sprite.png';
@icon-wl-real-location: 98px 238px -98px -238px 67px 16px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-wl-real-location';
@icon-wl-real-name-name: 'icon-wl-real-name';
@icon-wl-real-name-x: 244px;
@icon-wl-real-name-y: 238px;
@icon-wl-real-name-offset-x: -244px;
@icon-wl-real-name-offset-y: -238px;
@icon-wl-real-name-width: 67px;
@icon-wl-real-name-height: 16px;
@icon-wl-real-name-total-width: 325px;
@icon-wl-real-name-total-height: 288px;
@icon-wl-real-name-image: '../images/2.3.0/dist/sprite.png';
@icon-wl-real-name: 244px 238px -244px -238px 67px 16px 325px 288px '../images/2.3.0/dist/sprite.png' 'icon-wl-real-name';
@spritesheet-width: 325px;
@spritesheet-height: 288px;
@spritesheet-image: '../images/2.3.0/dist/sprite.png';
@spritesheet-sprites: @icon-copper-mini @icon-gold-mini @icon-gold-seller @icon-home-mini @icon-icon-abletrunk @icon-icon-check @icon-icon-discheck @icon-icon-disgather @icon-icon-disshopcart @icon-icon-gather @icon-icon-label @icon-icon-shopcart @icon-icon-trunk @icon-invalid-mini @icon-menu @icon-no1 @icon-no2 @icon-no3 @icon-people @icon-plus @icon-real-name-mini @icon-sliver-mini @icon-talk @icon-tip-angle @icon-wl-real-location @icon-wl-real-name;
@spritesheet: 325px 288px '../images/2.3.0/dist/sprite.png' @spritesheet-sprites;

/*
The provided classes are intended to be used with the array-like variables

.icon-home {
  .sprite-width(@icon-home);
}
.icon-email {
  .sprite(@icon-email);
}
*/
.sprite-width(@sprite) {
  width: extract(@sprite, 5);
}

.sprite-height(@sprite) {
  height: extract(@sprite, 6);
}

.sprite-position(@sprite) {
  @sprite-offset-x: extract(@sprite, 3);
  @sprite-offset-y: extract(@sprite, 4);
  background-position: @sprite-offset-x @sprite-offset-y;
}

.sprite-image(@sprite) {
  @sprite-image: extract(@sprite, 9);
  @sprite-image-bare: ~`"@{sprite-image}".slice(1, -1)`;
  background-image: url(@sprite-image-bare);
}

.sprite(@sprite) {
  .sprite-image(@sprite);
  .sprite-position(@sprite);
  .sprite-width(@sprite);
  .sprite-height(@sprite);
}

/*
The `.sprites` mixin generates identical output to the CSS template
  but can be overridden inside of LESS

This must be run when you have at least 2 sprites.
  If run with a single sprite, then there will be reference errors.

.sprites(@spritesheet-sprites);
*/
.sprites(@sprites, @i: 1) when (@i <= length(@sprites)) {
  @sprite: extract(@sprites, @i);
  @sprite-name: e(extract(@sprite, 10));
  .@{sprite-name} {
    .sprite(@sprite);
  }
  .sprites(@sprites, @i + 1);
}