a-pollo/test/tap/data/parse-files.json

The visual CSS style guide for teams

[
  {
    "data": "$bem-element: '__' !default;\n$bem-modifier: '--' !default;\n$-bem-block-name: '' !default;\n$-bem-element-name: '';\n\n@mixin -bem-check-wrapper {\n  @if $-bem-block-name == '' {\n    @error 'You must wrap this mixin inside block mixin wrapper';\n  }\n}\n\n@mixin block ($block-name) {\n  $-bem-block-name: '.#{$block-name}' !global;\n\n  .#{$block-name} {\n    @content;\n  }\n  $-bem-block-name: '' !global;\n}\n\n@mixin element ($element-name) {\n  $element-name: #{$bem-element}#{$element-name};\n  $-bem-element-name: $element-name !global;\n\n  @include -bem-check-wrapper;\n\n  @if str-index(inspect(&), $bem-element) {\n    & #{$-bem-block-name}#{$element-name} {\n      @content;\n    }\n  } @else if str-index(inspect(&), ':hover') {\n    & #{$-bem-block-name}#{$element-name} {\n      @content;\n    }\n  } @else if str-index(inspect(&), $bem-modifier) {\n    & #{$-bem-block-name}#{$element-name} {\n      @content;\n    }\n  } @else {\n    @at-root &#{$element-name} {\n      @content;\n    }\n  }\n  $-bem-element-name: '' !global;\n}\n\n@mixin modifier ($modifier-name) {\n  $modifier-name: #{$bem-modifier}#{$modifier-name};\n  @include -bem-check-wrapper;\n\n  @if str-index(inspect(&), ':hover') {\n    $length: length(str-explode(inspect(&), ' '));\n\n    @if $length >= 2 {\n      @at-root &#{$modifier-name} {\n        $parent: &;\n        @content;\n      }\n    } @else {\n      $element-name: nth(str-replace(nth(str-explode(inspect(&), ':'), 1), '(', ''), 1);\n\n      &#{$element-name}#{$modifier-name} {\n        @content;\n      }\n    }\n  } @else {\n    &#{$modifier-name} {\n      @content;\n    }\n  }\n}\n\n/*\n  @a-pollo-doc\n  @author: Vittorio Vittori\n  @category: BEM\n  @code: Example on using the mixin with some static property\n    @include block (button) {\n      background: #3f6c44;\n      color: #fff;\n      display: inline-block;\n      font-size: 12px;\n      padding: 4px 8px;\n    }\n  @css: This is the CSS generated\n    .button {\n      background: #3f6c44;\n      color: #fff;\n      display: inline-block;\n      font-size: 12px;\n      padding: 4px 8px;\n    }\n  @date: 2016-12-28T17:40:42+01:00\n  @type: mixin\n  @html: A simple HTML element to see how mixin works\n    <a class=\"button\" href=\"#\">Visit this link</a>\n  @icon: fa fa-css3\n  @name: block\n  @param: {string} ($block-name) [required]\n          Defines the block name of the BEM component\n  @public: true\n  @returns: css\n  @text: Defines the block name of the BEM component. This mixin is required as wrapper of `element` and `modifier` mixins\n  @version: 4.0.0\n*/\n\n/*\n  @a-pollo-doc\n  @author: Vittorio Vittori\n  @category: BEM\n  @code: You must wrap `element` mixin inside `block` mixin\n    @include block (button) {\n      background: #3f6c44;\n      display: inline-block;\n      padding: 4px 8px;\n\n      @include element (text) {\n        color: #fff;\n        font-size: 12px;\n      }\n    }\n  @css: The CSS generated will keep everything on 1 class level deep\n    .button {\n      background: #3f6c44;\n      display: inline-block;\n      padding: 4px 8px;\n    }\n    .button__text {\n      color: #fff;\n      font-size: 12px;\n    }\n  @date: 2016-12-28T18:09:00+01:00\n  @type: mixin\n  @html: Elements should be inside a parent block\n    <a class=\"button\" href=\"#\">\n      <span class=\"button__text\">Visit this link</span>\n    </a>\n  @icon: fa fa-css3\n  @name: element\n  @param: {string} ($element-name) [required]\n          Defines the element name of the BEM component\n  @public: true\n  @returns: css\n  @text: Defines the element name of the BEM component. This mixin is required as wrapped inside `block` mixin\n  @version: 4.0.0\n*/\n\n/*\n  @a-pollo-doc\n  @author: Vittorio Vittori\n  @category: BEM\n  @code: Modifiers can be applied to `block` or `element` mixins\n    @include block (button) {\n      background: #3f6c44;\n      color: #fff;\n      display: inline-block;\n      font-size: 12px;\n      padding: 4px 8px;\n\n      @include modifier (error) {\n        background: #f02052;\n      }\n    }\n  @css:\n    .button {\n      background: #3f6c44;\n      color: #fff;\n      display: inline-block;\n      font-size: 12px;\n      padding: 4px 8px;\n    }\n    .button--error {\n      background: #f02052;\n    }\n  @date: 2016-12-28T18:09:00+01:00\n  @type: mixin\n  @html: Remember to keep the modifier's original block or element selector\n    <a class=\"button button--error\" href=\"#\">Click here to report the error</a>\n  @icon: fa fa-css3\n  @name: modifier\n  @param: {string} ($modifier-name) [required]\n          Defines the modifier name of the BEM component\n  @public: true\n  @returns: css\n  @text: Defines the modifier name of the BEM component. This mixin is required as wrapped inside `block` mixin\n  @version: 4.0.0\n*/\n",
    "path": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/components/bem.scss"
  },
  {
    "data": "/*\n  @a-pollo-doc\n  @author: Vittorio Vittori\n  @category: Functions\n  @code: Usage example\n    .selector {\n      width: scale-value(40px, 0.5);\n    }\n  @css: The CSS generated\n    .selector {\n      width: 20px;\n    }\n  @date: 2017-01-05T15:01:54+01:00\n  @type: function\n  @icon: fa fa-terminal\n  @name: scale-value\n  @param: {unit-value} ($value) [required]\n          The unit value to be scaled, es: `10px`, `2em`, etc.\n  @param: {number} ($scale) [required]\n          The scale number to change the value, es: `0.5`, `1`, `1.75`, etc.\n  @public: true\n  @returns: unit-value\n  @text: Scales unit values passed, the return value will be rounded.\n  @version: 4.0.0\n*/\n\n@function scale-value($value, $scale) {\n  @return round($value * $scale);\n}\n\n@function spacing($scale: 1) {\n  @return scale-value($spacing, $scale);\n}\n\n@function s($scale: 1, $value: null) {\n  @if $value == null {\n    @return spacing($scale);\n  } @else {\n    @return scale-value($value, $scale);\n  }\n}\n\n@function step($step, $total-steps: $row-columns-total) {\n  @return ($step * 100 / $total-steps) * 1%;\n}\n\n@function get($map, $attribute) {\n  @if map-has-key($map, $attribute) {\n    @return map-get($map, $attribute);\n  } @else {\n    @error 'No attribute \\'#{$attribute}\\' found inside map #{$map}\\n'\n    + 'Please checkout your code to fine where is the problem.';\n  }\n}\n",
    "path": "/path/to/user/a-pollo/test/samples/sass/frontsize/core/functions/public.scss"
  },
  {
    "data": "\n$font-family-sans: helvetica, arial, sans-serif;\n$font-family-serif: georgia, 'times new roman', times, serif;\n$font-family-monospace: menlo, monaco, 'courier new', monospace;\n\n$color-azure: #135aa3; /* @a-pollo-color: Azure */\n$color-candy-corn: rgb(246, 225, 82); /* @a-pollo-color: Candy corn */\n$color-conifer: rgb(177, 232, 75); /* @a-pollo-color: Conifer */\n$color-cranberry: rgb(246, 96, 141); /* @a-pollo-color: Cranberry */\n$color-limed-spruce: #3f494f; /* @a-pollo-color: Limed spruce */\n$color-picton-blue: #47b0ec; /* @a-pollo-color: Picton blue */\n$color-turquoise-blue: rgb(81, 215, 223); /* @a-pollo-color: Turquoise blue */\n$color-white: #fff; /* @a-pollo-color: White */\n\n$color-red: rgb(255, 0, 0); /* @a-pollo-color: Red */\n",
    "path": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/_config/vars.scss"
  },
  {
    "data": "\n\n@mixin -button-social($text, $background) {\n  background-color: $background;\n  color: mix($text, $background, 70%);\n\n  &:hover {\n    color: $text;\n  }\n\n  @include element ('icon') {\n    color: $text;\n  }\n}\n\n/*\n  @a-pollo-snippet\n  @name: button-social\n  @auth: [Vittorio Vittori](http://vit.to)\n  @date: 2017-01-06T17:50:18+01:00\n  @category: Buttons\n  @text: The base usage without styles of the button, this component **requires** [FontAwesome](http://fontawesome.github.io) to be loaded as dependency.\n  @html:\n    <a href=\"#\" class=\"button-social\">\n      <div class=\"button-social__icon\">\n        <i class=\"fa fa-dashboard\"></i>\n      </div>\n      <div class=\"button-social__network\">\n        Button\n      </div>\n    </a>\n*/\n\n.button-social {\n\n  border-radius: 4px;\n  cursor: pointer;\n  display: inline-block;\n  padding: s(0.25) s(0.5);\n  text-decoration: none;\n  transition: color 0.125s ease-out;\n  user-select: none;\n  width: auto;\n\n  @include -button-social(#fff, #777);\n\n  @include element ('icon') {\n    display: table-cell;\n    text-align: center;\n    white-space: nowrap;\n    width: 18px;\n  }\n\n  @include element ('network') {\n    display: table-cell;\n    font-size: 14px;\n    padding-left:  s(0.25);\n    text-transform: capitalize;\n  }\n\n  /*\n    @a-pollo-snippet\n    @name: button-social--small\n    @auth: [Vittorio Vittori](http://vit.to)\n    @date: 2015-12-03\n    @text: The GitHub version with `button-social--small` and `button-social--with-effects` modifiers.\n    @html:\n      <a href=\"#\" class=\"button-social button-social--small\">\n        <div class=\"button-social__icon\">\n          <i class=\"fa fa-compress\"></i>\n        </div>\n        <div class=\"button-social__network\">\n          Small button\n        </div>\n      </a>\n  */\n  @include modifier ('small') {\n    padding: s(0.125) s(0.25);\n\n    @include element ('network') {\n      font-size: 12px;\n      padding-left:  s(0.125);\n    }\n  }\n\n  /*\n    @a-pollo-snippet\n    @name: button-social--rounded\n    @auth: [Vittorio Vittori](http://vit.to)\n    @date: 2017-01-06T17:54:08+01:00\n    @text: This Facebook version has also `button-social--rounded` modifier to set it with rounded corners.\n    @html:\n      <a href=\"#\" class=\"button-social button-social--rounded\">\n        <div class=\"button-social__icon\">\n          <i class=\"fa fa-life-ring\"></i>\n        </div>\n        <div class=\"button-social__network\">\n          Rounded button\n        </div>\n      </a>\n  */\n  @include modifier ('rounded') {\n    border-radius: 100px;\n    padding-left: s(0.75);\n    padding-right: s(0.75);\n  }\n\n  /*\n    @a-pollo-snippet\n    @name: button-social--big\n    @auth: [Vittorio Vittori](http://vit.to)\n    @date: 2016-01-09\n    @text: This Facebook version has also `button-social--big` modifier to make it bigger.\n    @html:\n      <a href=\"#\" class=\"button-social button-social--big\">\n        <div class=\"button-social__icon\">\n          <i class=\"fa fa-expand\"></i>\n        </div>\n        <div class=\"button-social__network\">\n          Big button\n        </div>\n      </a>\n  */\n  @include modifier ('big') {\n    padding: s(0.5) s(0.75);\n  }\n\n  /*\n    @a-pollo-snippet\n    @auth: [Vittorio Vittori](http://vit.to)\n    @name: button-social--with-effects\n    @date: 2017-01-06T17:56:58+01:00\n    @html:\n      <a href=\"#\" class=\"button-social button-social--with-effects\">\n        <div class=\"button-social__icon\">\n          <i class=\"fa fa-magic\"></i>\n        </div>\n        <div class=\"button-social__network\">\n          Button with effects\n        </div>\n      </a>\n  */\n  @include modifier ('with-effects') {\n    $shadow-area: rgba(0, 0, 0, 0.2);\n    $shadow-line: rgba(255, 255, 255, 0.3);\n    box-shadow: 0 1px 2px $shadow-area, inset 0 1px 0 $shadow-line;\n  }\n\n  /*\n    @a-pollo-snippet\n    @auth: [Vittorio Vittori](http://vit.to)\n    @date: 2017-01-06T17:57:20+01:00\n    @name: button-social--facebook\n    @html:\n      <a href=\"#\" class=\"button-social button-social--facebook\">\n        <div class=\"button-social__icon\">\n          <i class=\"fa fa-facebook\"></i>\n        </div>\n        <div class=\"button-social__network\">\n          facebook\n        </div>\n      </a>\n    @text: This should be used to connect social accounts to the project service.\n  */\n  @include modifier ('facebook') {\n    @include -button-social(white, #3b5998);\n  }\n\n  /*\n    @a-pollo-snippet\n    @auth: [Vittorio Vittori](http://vit.to)\n    @name: button-social--twitter\n    @date: 2017-01-06T18:01:30+01:00\n    @html:\n      <a href=\"#\" class=\"button-social button-social--twitter button-social--with-effects\">\n        <div class=\"button-social__icon\">\n          <i class=\"fa fa-twitter\"></i>\n        </div>\n        <div class=\"button-social__network\">\n          twitter\n        </div>\n      </a>\n  */\n  @include modifier ('twitter') {\n    @include -button-social(white, #55acee);\n  }\n\n  /*\n    @a-pollo-snippet\n    @name: button-social--github\n    @auth: [Vittorio Vittori](http://vit.to)\n    @date: 2017-01-06T17:59:33+01:00\n    @html:\n      <a href=\"#\" class=\"button-social button-social--github\">\n        <div class=\"button-social__icon\">\n          <i class=\"fa fa-github-alt\"></i>\n        </div>\n        <div class=\"button-social__network\">\n          github\n        </div>\n      </a>\n  */\n  @include modifier ('github') {\n    @include -button-social(#333, #f5f5f5);\n  }\n\n  /*\n    @a-pollo-snippet\n    @auth: [Vittorio Vittori](http://vit.to)\n    @date: 2017-01-06T18:02:15+01:00\n    @name: button-social--google-plus\n    @html:\n      <a href=\"#\" class=\"button-social button-social--google-plus\">\n        <div class=\"button-social__icon\">\n          <i class=\"fa fa-google-plus\"></i>\n        </div>\n        <div class=\"button-social__network\">\n          googe plus\n        </div>\n      </a>\n  */\n  @include modifier ('google-plus') {\n    @include -button-social(white, #dc4e41);\n  }\n}\n",
    "path": "/path/to/user/a-pollo/test/samples/sass/frontsize/themes/default/widgets/button-social.scss"
  }
]