[ { "target": "demo", "code": "<button class=\"button\">Button</button>\n<button class=\"button--active\">Active Button</button>\n<button class=\"button--disabled\">Disabled Button</button>" }, { "target": "html", "code": "<button class=\"button\">Button</button>\n<button class=\"button--active\">Active Button</button>\n<button class=\"button--disabled\">Disabled Button</button>" }, { "target": "sass", "code": "@mixin button__base($color: null, $bgColor: #f3f3f3, $bdColor: #a6a6a6) {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: $bgColor;\n border: 1px solid $bdColor;\n border-radius: 2px;\n outline: none;\n color: $color;\n}\n\n@mixin button--normal($color: null, $bgColor: #f3f3f3, $bdColor: #a6a6a6) {\n @include button__base($color, $bgColor, $bdColor);\n cursor: pointer;\n}\n\n@mixin button--disabled($color: null, $bgColor: #f3f3f3, $bdColor: #a6a6a6) {\n @include button__base($color, $bgColor, $bdColor);\n opacity: .4;\n cursor: default;\n}\n", "altCode": "@import \"button\";\n@import \"variable\";\n\n.button {\n @include button--normal;\n}\n\n.button--active {\n @include button--normal(#fff, $color, #710f26);\n}\n\n.button--disabled {\n @include button--disabled;\n}\n" }, { "target": "css", "code": ".button {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n cursor: pointer;\n}\n\n.button--active {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #cb1b45;\n border: 1px solid #710f26;\n border-radius: 2px;\n cursor: pointer;\n outline: none;\n color: #fff;\n}\n\n.button--disabled {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n opacity: .4;\n cursor: default;\n}\n" }, { "target": "postcss", "code": ".button {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n cursor: pointer;\n}\n\n.button--active {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #cb1b45;\n border: 1px solid #710f26;\n border-radius: 2px;\n cursor: pointer;\n outline: none;\n color: #fff;\n}\n\n.button--disabled {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n opacity: .4;\n cursor: default;\n}\n", "altCode": ".button {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n cursor: pointer;\n}\n\n.button--active {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #cb1b45;\n border: 1px solid #710f26;\n border-radius: 2px;\n cursor: pointer;\n outline: none;\n color: #fff;\n}\n\n.button--disabled {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: #f3f3f3;\n border: 1px solid #a6a6a6;\n border-radius: 2px;\n outline: none;\n opacity: .4;\n cursor: default;\n}\n" }, { "target": "less", "code": ".button__base(@color: null, @bgColor: #f3f3f3, @bdColor: #a6a6a6) {\n font-size: inherit;\n padding: .3em .5em;\n margin: .5em;\n background: @bgColor;\n border: 1px solid @bdColor;\n border-radius: 2px;\n outline: none;\n\n & when (iscolor(@color)) {\n color: @color;\n }\n}\n\n.button--normal(@color: null, @bgColor: #f3f3f3, @bdColor: #a6a6a6) {\n .button__base(@color, @bgColor, @bdColor);\n cursor: pointer;\n}\n\n.button--disabled(@color: null, @bgColor: #f3f3f3, @bdColor: #a6a6a6) {\n .button__base(@color, @bgColor, @bdColor);\n opacity: .4;\n cursor: default;\n}\n", "altCode": "@import (reference) \"button\";\n\n.button {\n .button--normal();\n}\n\n.button--active {\n .button--normal(#fff, #cb1b45, #710f26);\n}\n\n.button--disabled {\n .button--disabled();\n}\n" }, { "target": "stylus", "code": "button__base(color = null, bgColor = #f3f3f3, bdColor = #a6a6a6)\n font-size: inherit\n padding: .3em .5em\n margin: .5em\n background: bgColor\n border: 1px solid bdColor\n border-radius: 2px\n outline: none\n\n if color != null\n color: color\n\nbutton--normal(color = null, bgColor = #f3f3f3, bdColor = #a6a6a6)\n button__base(color, bgColor, bdColor)\n cursor: pointer\n\nbutton--disabled(color = null, bgColor = #f3f3f3, bdColor = #a6a6a6)\n button__base(color, bgColor, bdColor)\n opacity: .4\n cursor: default\n", "altCode": "@import \"button\"\n\n.button\n button--normal()\n\n.button--active\n button--normal(#fff, #cb1b45, #710f26)\n\n.button--disabled\n button--disabled()\n" } ]