From ba9016cdf04f46a3421b233e607518cb06a6190a Mon Sep 17 00:00:00 2001 From: Hannu Pelkonen Date: Wed, 10 Jun 2015 15:24:33 +0300 Subject: [PATCH] Possibility to override internal styles using mixin --- README.md | 2 ++ lib/app/sass/_styleguide_variables.scss | 7 ++++++- lib/app/sass/app.scss | 12 ++++++++++++ 3 files changed, 20 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 009286f8..e4807f31 100644 --- a/README.md +++ b/README.md @@ -231,6 +231,8 @@ Disable HTML5 URL mode. When this option parameter is enabled, style guide will Path to file that defines custom UI color overrides using SASS variables. See all possible variables [here](https://github.com/SC5/sc5-styleguide/blob/master/lib/app/sass/_styleguide_variables.scss). +Internal styles could be overriden by defining new styles inside the `styleguide_custom_styles` mixin. This mixin is added to the end of the application stylesheet. + **filesConfig** (array, optional) **(Experimental feature)** diff --git a/lib/app/sass/_styleguide_variables.scss b/lib/app/sass/_styleguide_variables.scss index 8c2634f2..ec9fb016 100644 --- a/lib/app/sass/_styleguide_variables.scss +++ b/lib/app/sass/_styleguide_variables.scss @@ -36,4 +36,9 @@ $header-height: 90px !default; $menu-height: 40px !default; $content-max-width: 68em !default; -$mobile: "screen and (max-width: 768px)" !default; \ No newline at end of file +$mobile: "screen and (max-width: 768px)" !default; + +@mixin styleguide_custom_styles { + // This mixin is included in the end of UI stylesheet + // You can override any styleguide internal style here +} \ No newline at end of file diff --git a/lib/app/sass/app.scss b/lib/app/sass/app.scss index 010ca6a8..841fdb21 100644 --- a/lib/app/sass/app.scss +++ b/lib/app/sass/app.scss @@ -2,6 +2,11 @@ $fa-font-path: '../assets/fonts'; @import 'components/font-awesome/font-awesome'; @import 'bourbon'; +@mixin styleguide_custom_styles { + // User can re-define this mixin in styleguide_custom_variables to create custom style overrides + // This mixin is included in the end of this file +} + @import 'styleguide_custom_variables'; @import 'styleguide_variables'; @import 'styleguide_mixins'; @@ -1242,3 +1247,10 @@ Styleguide 4.4 display: initial; cursor: pointer; } + +// styleguide:ignore:start + +@include styleguide_custom_styles; + +// styleguide:ignore:end +