[
{
"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 Visit this link\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 \n Visit this link\n \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 Click here to report the error\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 \n \n \n
\n \n Button\n
\n \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 \n \n \n
\n \n Small button\n
\n \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 \n \n \n
\n \n Rounded button\n
\n \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 \n \n \n
\n \n Big button\n
\n \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 \n \n \n
\n \n Button with effects\n
\n \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 \n \n \n
\n \n facebook\n
\n \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 \n \n \n
\n \n twitter\n
\n \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 \n \n \n
\n \n github\n
\n \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 \n \n \n
\n \n googe plus\n
\n \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"
}
]