livingstyleguide 2.0.0.pre.3 → 2.0.0.pre.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/bin/livingstyleguide +1 -1
  3. data/lib/livingstyleguide/command_line_interface.rb +14 -11
  4. data/lib/livingstyleguide/commands/colors.rb +16 -16
  5. data/lib/livingstyleguide/commands/default.rb +1 -1
  6. data/lib/livingstyleguide/commands/font_example.rb +2 -1
  7. data/lib/livingstyleguide/commands/full_width.rb +1 -1
  8. data/lib/livingstyleguide/commands/import_and_use.rb +16 -4
  9. data/lib/livingstyleguide/commands/layout.rb +22 -20
  10. data/lib/livingstyleguide/commands/options.rb +9 -9
  11. data/lib/livingstyleguide/commands/sass.rb +5 -11
  12. data/lib/livingstyleguide/commands/search_box.rb +6 -3
  13. data/lib/livingstyleguide/commands/style.rb +1 -1
  14. data/lib/livingstyleguide/document.rb +64 -41
  15. data/lib/livingstyleguide/integration/compass.rb +5 -2
  16. data/lib/livingstyleguide/integration/rails.rb +5 -3
  17. data/lib/livingstyleguide/integration/sass.rb +1 -1
  18. data/lib/livingstyleguide/integration/sprockets.rb +9 -4
  19. data/lib/livingstyleguide/markdown_extensions.rb +20 -11
  20. data/lib/livingstyleguide/templates/code.html.erb +1 -1
  21. data/lib/livingstyleguide/templates/example.html.erb +2 -2
  22. data/lib/livingstyleguide/templates/font-example.html.erb +3 -3
  23. data/lib/livingstyleguide/templates/javascript.html.erb +1 -1
  24. data/lib/livingstyleguide/templates/layout.html.erb +32 -38
  25. data/lib/livingstyleguide/templates/logo.html.erb +1 -1
  26. data/lib/livingstyleguide/templates/scripts/copy.js.erb +12 -12
  27. data/lib/livingstyleguide/templates/scripts/copy_code.js.erb +7 -7
  28. data/lib/livingstyleguide/templates/scripts/copy_colors.js.erb +14 -14
  29. data/lib/livingstyleguide/templates/scripts/search.js.erb +30 -30
  30. data/lib/livingstyleguide/templates/scripts/toggle_code.js.erb +23 -23
  31. data/lib/livingstyleguide/templates/search-box.html.erb +1 -1
  32. data/lib/livingstyleguide/templates/toggle-code.html.erb +1 -1
  33. data/lib/livingstyleguide/tilt_template.rb +17 -19
  34. data/lib/livingstyleguide/version.rb +1 -1
  35. data/lib/livingstyleguide.rb +12 -2
  36. data/stylesheets/_livingstyleguide.scss +76 -65
  37. data/stylesheets/livingstyleguide/_code.scss +51 -51
  38. data/stylesheets/livingstyleguide/_color-swatches.scss +38 -38
  39. data/stylesheets/livingstyleguide/_content.scss +73 -73
  40. data/stylesheets/livingstyleguide/_functions.scss +1 -1
  41. data/stylesheets/livingstyleguide/_layout.scss +22 -22
  42. data/stylesheets/livingstyleguide/_reset.scss +1 -1
  43. data/stylesheets/livingstyleguide/_search-box.scss +14 -14
  44. data/stylesheets/livingstyleguide/_toggle-code.scss +10 -11
  45. metadata +21 -6
@@ -4,50 +4,50 @@
4
4
  };
5
5
 
6
6
  var addClass = function(el, name) {
7
- var classList = getClasses(el);
7
+ var classList = getClasses(el)
8
8
  if (classList.indexOf(name) == -1) {
9
- classList.push(name);
10
- el.className = classList.join(" ");
9
+ classList.push(name)
10
+ el.className = classList.join(" ")
11
11
  }
12
- };
12
+ }
13
13
 
14
14
  var removeClass = function(el, name) {
15
- var classList = getClasses(el);
16
- classList[classList.indexOf(name)] = null;
17
- el.className = classList.join(" ");
18
- };
15
+ var classList = getClasses(el)
16
+ classList[classList.indexOf(name)] = null
17
+ el.className = classList.join(" ")
18
+ }
19
19
 
20
20
  var toggleClass = function(el, name) {
21
- var classList = getClasses(el);
21
+ var classList = getClasses(el)
22
22
  if (classList.indexOf(name) == -1) {
23
- addClass(el, name);
24
- return true;
23
+ addClass(el, name)
24
+ return true
25
25
  }
26
26
  else {
27
- removeClass(el, name);
28
- return false;
27
+ removeClass(el, name)
28
+ return false
29
29
  }
30
- };
30
+ }
31
31
 
32
- var html = document.getElementsByTagName("HTML")[0];
32
+ var html = document.getElementsByTagName("HTML")[0]
33
33
 
34
- var hideCode = localStorage.getItem("lsg--hide-code");
34
+ var hideCode = localStorage.getItem("lsg-hide-code")
35
35
 
36
36
  if (hideCode == "true") {
37
- addClass(html, "lsg--hide-code");
37
+ addClass(html, "lsg-hide-code")
38
38
  }
39
39
 
40
40
  function toggleCode(event) {
41
- event.preventDefault();
42
- var hideCode = toggleClass(html, "lsg--hide-code");
43
- localStorage.setItem("lsg--hide-code", hideCode);
41
+ event.preventDefault()
42
+ var hideCode = toggleClass(html, "lsg-hide-code")
43
+ localStorage.setItem("lsg-hide-code", hideCode)
44
44
  }
45
45
 
46
46
  document.addEventListener("DOMContentLoaded", function() {
47
- var switches = document.getElementsByClassName("lsg--code-switch");
47
+ var switches = document.getElementsByClassName("lsg-code-switch")
48
48
  for (var i = 0; i < switches.length; i++) {
49
- switches[i].addEventListener("click", toggleCode);
49
+ switches[i].addEventListener("click", toggleCode)
50
50
  }
51
- });
51
+ })
52
52
 
53
53
  })(window);
@@ -1 +1 @@
1
- <input type="search" class="lsg--search-box" placeholder="<%= placeholder %>">
1
+ <input class="lsg-search-box" placeholder="<%= placeholder %>" type="search">
@@ -1 +1 @@
1
- <input type="button" class="lsg--code-switch">
1
+ <button class="lsg-code-switch" type="button"></button>
@@ -1,27 +1,28 @@
1
- require 'tilt'
2
- require 'erb'
3
- require 'yaml'
4
- require 'json'
1
+ require "tilt"
2
+ require "erb"
3
+ require "yaml"
4
+ require "json"
5
5
 
6
6
  module LivingStyleGuide
7
7
  class TiltTemplate < ::Tilt::Template
8
- self.default_mime_type = 'text/html'
8
+ self.default_mime_type = "text/html"
9
9
 
10
10
  def prepare
11
11
  end
12
12
 
13
- def evaluate(scope, locals, &block)
13
+ def evaluate(scope, _)
14
14
  @scope = scope
15
15
  parse_options(data)
16
16
  render_living_style_guide
17
17
  end
18
18
 
19
19
  private
20
+
20
21
  def sass_options
21
22
  if defined?(Compass)
22
23
  options = Compass.configuration.to_sass_plugin_options
23
24
  else
24
- load_path = File.join(File.dirname(__FILE__), '..', '..', 'stylesheets')
25
+ load_path = File.join(File.dirname(__FILE__), "..", "..", "stylesheets")
25
26
  options = { load_paths: [load_path] }
26
27
  end
27
28
  if defined?(Rails)
@@ -46,21 +47,19 @@ module LivingStyleGuide
46
47
  options
47
48
  end
48
49
 
49
- private
50
50
  def parse_options(data)
51
51
  data.strip!
52
- @options = (data[0] == '{') ? JSON.parse(data) : YAML.load(data)
52
+ @options = (data[0] == "{") ? JSON.parse(data) : YAML.load(data)
53
53
  @options = {} unless @options
54
54
  @options.keys.each do |key|
55
- @options[key.gsub('-', '_').to_sym] = @options.delete(key)
55
+ @options[key.tr("-", "_").to_sym] = @options.delete(key)
56
56
  end
57
57
  @options[:syntax] = @options.has_key?(:styleguide_sass) ? :sass : :scss
58
- @options[:source] ||= File.basename(file, '.html.lsg')
58
+ @options[:source] ||= File.basename(file, ".html.lsg")
59
59
  @options[:filename] = file
60
60
  @options[:root] ||= root
61
61
  end
62
62
 
63
- private
64
63
  def configure_cache
65
64
  return unless @scope.respond_to?(:depend_on)
66
65
  @engine.files.uniq.each do |file|
@@ -68,23 +67,23 @@ module LivingStyleGuide
68
67
  end
69
68
  end
70
69
 
71
- private
72
70
  def root
73
- if @scope.respond_to?(:environment) and @scope.environment.respond_to?(:root)
71
+ if @scope.respond_to?(:environment) &&
72
+ @scope.environment.respond_to?(:root)
74
73
  @scope.environment.root
75
74
  else
76
75
  find_root_path
77
76
  end
78
77
  end
79
78
 
80
- private
81
79
  def find_root_path
82
80
  path = @file.nil? ? Dir.pwd : File.dirname(@file)
83
- while path.length > 0 do
84
- if File.exists?(File.join(path, 'Gemfile')) or File.exists?(File.join(path, '.git'))
81
+ while path.length > 0
82
+ if File.exists?(File.join(path, "Gemfile")) ||
83
+ File.exists?(File.join(path, ".git"))
85
84
  break
86
85
  end
87
- path = File.expand_path('..', path)
86
+ path = File.expand_path("..", path)
88
87
  if path == "/"
89
88
  break
90
89
  end
@@ -92,7 +91,6 @@ module LivingStyleGuide
92
91
  path
93
92
  end
94
93
 
95
- private
96
94
  def render_living_style_guide
97
95
  @engine = ::LivingStyleGuide::Engine.new(@options, sass_options)
98
96
  html = @engine.render
@@ -1,3 +1,3 @@
1
1
  module LivingStyleGuide
2
- VERSION = "2.0.0.pre.3"
2
+ VERSION = "2.0.0.pre.4"
3
3
  end
@@ -9,11 +9,21 @@ rescue LoadError
9
9
  end
10
10
 
11
11
  module LivingStyleGuide
12
+ ROOT_PATH = File.join(File.dirname(__FILE__), "..")
13
+ SASS_PATH = File.join(ROOT_PATH, "stylesheets")
14
+ COMMANDS_REGEXP = %r{
15
+ ^@(?<name>[\w\d_-]+) # @command-name
16
+ (?:[ ](?<arguments>[^\n]*[^\{\n:]))? # arg1; arg2; opt1: 1
17
+ (?:
18
+ [ ]*\{\n(?<braces>(?:.|\n)*?)\n\} | # {\ncontent\ncontent\n}
19
+ (?<indented>(?:\n+[ \t].*)+(?=\n|\Z)) | # \n content\n content\n
20
+ [ ]*:\n(?<colon>(?:.|\n)*?)(?:\n\n|\Z) # :\ncontent\ncontent\n\n
21
+ )?
22
+ }x
23
+
12
24
  @@default_options = {
13
25
  default_language: :example,
14
26
  title: "Living Style Guide",
15
- header: %Q(<h1 class="lsg--page-title">Living Style Guide</h1>),
16
- footer: %Q(<div class="lsg--footer"><a class="lsg--logo" href="http://livingstyleguide.org">Made with the LivingStyleGuide gem.</a></div>),
17
27
  root: "/"
18
28
  }
19
29
 
@@ -2,95 +2,107 @@
2
2
 
3
3
  //// INTEGRATION ////
4
4
 
5
- $lsg--layout-selector: body !default;
5
+ $lsg-layout-selector: body !default;
6
6
 
7
- //// TYPOGRAPHY ////
7
+ //// GLOBAL TYPOGRAPHY ////
8
8
 
9
- $lsg--base-font: helvetica neue, helvetica, sans-serif !default;
10
- $lsg--base-font-size: 14px !default;
11
- $lsg--base-font-weight: normal !default;
12
- $lsg--base-line-height: 1.429 !default;
13
- $lsg--base-text-align: left !default;
9
+ $lsg-font-family: helvetica neue, helvetica, sans-serif !default;
10
+ $lsg-font-size: 14px !default;
11
+ $lsg-font-weight: normal !default;
12
+ $lsg-line-height: 1.429 !default;
13
+ $lsg-text-align: left !default;
14
14
 
15
- $lsg--page-title-font-size: 42px !default;
15
+ $lsg-page-title-font-size: 42px !default;
16
16
 
17
- $lsg--headline-font: $lsg--base-font !default;
18
- $lsg--headline-font-size: 32px !default;
19
- $lsg--headline-font-weight: bold !default;
20
- $lsg--headline-line-height: 1.1 !default;
21
- $lsg--headline-text-align: left !default;
17
+ //// HEADLINE TYPOGRAPHY ////
22
18
 
23
- $lsg--sub-headline-font-size: 21px !default;
19
+ $lsg-headline-font-family: $lsg-font-family !default;
20
+ $lsg-headline-font-size: 32px !default;
21
+ $lsg-headline-font-weight: bold !default;
22
+ $lsg-headline-line-height: 1.1 !default;
23
+ $lsg-headline-text-align: left !default;
24
24
 
25
- $lsg--sub-sub-headline-font-size: $lsg--base-font-size !default;
25
+ $lsg-sub-headline-font-size: 21px !default;
26
26
 
27
- $lsg--code-font: andale mono, courier, courier new, monospace !default;
28
- $lsg--code-font-size: 13px !default;
29
- $lsg--code-font-weight: normal !default;
30
- $lsg--code-line-height:
31
- round($lsg--base-font-size * $lsg--base-line-height) !default;
27
+ $lsg-sub-sub-headline-font-size: $lsg-font-size !default;
32
28
 
33
- $lsg--font-example-first-line: $lsg--base-line-height * 4em;
29
+ //// CODE TYPOGRAPHY ////
34
30
 
35
- //// STYLING ////
31
+ $lsg-code-font-family: andale mono, courier, courier new, monospace !default;
32
+ $lsg-code-font-size: 13px !default;
33
+ $lsg-code-font-weight: normal !default;
34
+ $lsg-code-line-height: round($lsg-font-size * $lsg-line-height) !default;
36
35
 
37
- $lsg--background-color: white !default;
38
- $lsg--border-width: 1px !default;
39
- $lsg--border-color: silver !default;
40
- $lsg--border-radius: 0 !default;
41
- $lsg--color: black !default;
42
- $lsg--link-color: mix($lsg--color, $lsg--background-color, 80%) !default;
43
- $lsg--gap-width:
44
- floor($lsg--base-font-size * $lsg--base-line-height / 2) !default;
45
- $lsg--width: 72 * $lsg--gap-width !default;
46
- $lsg--full-width-padding: 0 !default;
36
+ //// FONT EXAMPLE TYPOGRAPHY ////
47
37
 
48
- @if (lightness($lsg--background-color) < lightness($lsg--color)) {
49
- $lsg--adjust-lightness:
50
- 16 - (lightness($lsg--color) - lightness($lsg--background-color)) / 6.25 + 4
38
+ $lsg-font-example-first-line: $lsg-line-height * 4em;
39
+
40
+ //// GLOBAL STYLING ////
41
+
42
+ $lsg-background-color: white !default;
43
+ $lsg-border-width: 1px !default;
44
+ $lsg-border-color: silver !default;
45
+ $lsg-border-radius: 0 !default;
46
+ $lsg-color: black !default;
47
+ $lsg-link-color: mix($lsg-color, $lsg-background-color, 80%) !default;
48
+ $lsg-gutter: floor($lsg-font-size * $lsg-line-height / 2) !default;
49
+ $lsg-width: 72 * $lsg-gutter !default;
50
+ $lsg-full-width-padding: 0 !default;
51
+
52
+ @if (lightness($lsg-background-color) < lightness($lsg-color)) {
53
+ $lsg-adjust-lightness:
54
+ 16 - (lightness($lsg-color) - lightness($lsg-background-color)) / 6.25 + 4
51
55
  !default !global;
52
56
  }
53
57
  @else {
54
- $lsg--adjust-lightness:
55
- 4 - (lightness($lsg--background-color) - lightness($lsg--color)) / 25
58
+ $lsg-adjust-lightness:
59
+ 4 - (lightness($lsg-background-color) - lightness($lsg-color)) / 25
56
60
  !default !global;
57
61
  }
58
62
 
59
- $lsg--example-padding: $lsg--gap-width !default;
60
- $lsg--example-background: lsg--striped(
61
- mix($lsg--color, $lsg--background-color, 4% + $lsg--adjust-lightness),
62
- $lsg--background-color, $width: 12%) !default;
63
+ //// EXAMPLES ////
64
+
65
+ $lsg-example-padding: $lsg-gutter !default;
66
+ $lsg-example-background: lsg-striped(
67
+ mix($lsg-color, $lsg-background-color, 4% + $lsg-adjust-lightness),
68
+ $lsg-background-color, $width: 12%) !default;
69
+
70
+ //// CODE ////
63
71
 
64
- $lsg--code-color: $lsg--color !default;
65
- $lsg--code-background-color:
66
- mix($lsg--code-color, $lsg--background-color, 4% + $lsg--adjust-lightness)
72
+ $lsg-code-color: $lsg-color !default;
73
+ $lsg-code-background-color:
74
+ mix($lsg-code-color, $lsg-background-color, 4% + $lsg-adjust-lightness)
67
75
  !default;
68
- $lsg--code-background: $lsg--code-background-color !default;
69
- $lsg--code-border-width: $lsg--border-width !default;
70
- $lsg--code-border-color: $lsg--border-color !default;
71
- $lsg--code-border-radius: $lsg--border-radius !default;
72
- $lsg--code-padding: $lsg--gap-width !default;
73
-
74
- $lsg--color-swatch-color: black !default;
75
- $lsg--color-swatch-border-width: 1px !default;
76
- $lsg--color-swatch-border-color: rgba($lsg--color, 0.05) !default;
77
- $lsg--color-swatch-border-radius: 50% !default;
78
- $lsg--color-swatches-per-line: 2 !default;
79
-
80
- $lsg--highlight-color: $lsg--code-background-color !default;
81
- $lsg--highlight-background-color: adjust-hue($lsg--code-color, 180) !default;
82
- $lsg--highlight-border-radius: 2px;
76
+ $lsg-code-background: $lsg-code-background-color !default;
77
+ $lsg-code-border-width: $lsg-border-width !default;
78
+ $lsg-code-border-color: $lsg-border-color !default;
79
+ $lsg-code-border-radius: $lsg-border-radius !default;
80
+ $lsg-code-padding: $lsg-gutter !default;
81
+
82
+ //// COLOR SWATCHES ////
83
+
84
+ $lsg-color-swatch-color: black !default;
85
+ $lsg-color-swatch-border-width: 1px !default;
86
+ $lsg-color-swatch-border-color: rgba($lsg-color, 0.05) !default;
87
+ $lsg-color-swatch-border-radius: 50% !default;
88
+ $lsg-color-swatches-per-line: 2 !default;
89
+
90
+ //// HIGHLIGHTS ////
91
+
92
+ $lsg-highlight-color: $lsg-code-background-color !default;
93
+ $lsg-highlight-background-color: adjust-hue($lsg-code-color, 180) !default;
94
+ $lsg-highlight-border-radius: 2px;
83
95
 
84
96
  //// IMAGES - SVG ////
85
97
 
86
- $lsg--copy-background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100%' height='100%' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'> <path id='copy-6-icon' d='M360.277,151.999V50.001H50v310.137h102v101.861h310v-310H360.277z M90,320.138V90.001h230.277v61.998 H152v168.139H90z M421.5,421.499h-230V191.832h20.569c10.639,0,20.745,4.656,27.657,12.744l19.023,22.256H358l19.366-22.408 c6.911-7.996,16.958-12.592,27.528-12.592H421.5V421.499z M379.479,338.581h-145.99v-29h145.99V338.581z M379.479,286.249h-145.99 v-29h145.99V286.249z M233.488,361.999h146.023v29H233.488V361.999z' fill='#{$lsg--background-color}'/></svg>");
87
- $lsg--code-switch-hide: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='1000' width='1000'><path d='M0 523.831q5.859 -48.825 64.449 -109.368 78.12 -80.073 175.77 -128.898 128.898 -60.543 259.749 -60.543 29.295 0 58.59 1.953l74.214 -128.898q9.765 -15.624 23.436 -17.577 3.906 0 7.812 1.953l50.778 31.248q17.577 7.812 1.953 33.201l-56.637 101.556 -46.872 78.12 -41.013 72.261 -144.522 249.984 -41.013 72.261 -46.872 80.073 -56.637 99.603q-15.624 25.389 -31.248 15.624l-52.731 -31.248q-15.624 -7.812 0 -33.201l48.825 -85.932 -7.812 -3.906q-103.509 -52.731 -175.77 -128.898 -64.449 -72.261 -64.449 -109.368zm263.655 0q0 74.214 46.872 132.804l48.825 -83.979q-9.765 -23.436 -9.765 -48.825 0 -50.778 34.178 -90.815t84.956 -49.802l48.825 -83.979l-17.577 0q-97.65 0 -166.982 65.425t-69.332 159.169zm177.723 294.903l41.013 -70.308l17.577 0q97.65 0 166.982 -65.425t69.332 -159.169q0 -74.214 -46.872 -132.804l62.496 -109.368q1.953 1.953 3.906 2.929t3.906 .977q103.509 52.731 175.77 128.898 64.449 72.261 64.449 109.368 -5.859 48.825 -64.449 109.368 -78.12 80.073 -175.77 128.898 -128.898 60.543 -259.749 60.543 -25.389 0 -58.59 -3.906zm89.838 -154.287l109.368 -189.441q9.765 25.389 9.765 48.825 0 50.778 -34.178 89.838t-84.956 50.778z' fill='#{$lsg--background-color}'/></svg>");
88
- $lsg--code-switch-show: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='1000' width='1000'><path d='M0 499.809q5.859 -48.825 64.449 -109.368 78.12 -80.073 175.77 -128.898 128.898 -60.543 259.749 -60.543 136.71 1.953 259.749 60.543 103.509 52.731 175.77 128.898 64.449 72.261 64.449 109.368 -5.859 48.825 -64.449 109.368 -78.12 80.073 -175.77 128.898 -128.898 60.543 -259.749 60.543 -136.71 -1.953 -259.749 -60.543 -103.509 -52.731 -175.77 -128.898 -64.449 -72.261 -64.449 -109.368zm263.655 0q0 93.744 69.332 159.169t166.982 65.425 166.982 -65.425 69.332 -159.169 -69.332 -159.169 -166.982 -65.425 -166.982 65.425 -69.332 159.169zm85.932 -.977q0 -59.567 43.943 -101.556t106.439 -41.989 106.439 41.989 43.943 101.556 -43.943 102.532 -106.439 42.966 -106.439 -42.966 -43.943 -102.532z' fill='#{$lsg--background-color}'/></svg>");
98
+ $lsg-copy-background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='100%' height='100%' viewBox='0 0 512 512' enable-background='new 0 0 512 512' xml:space='preserve'> <path id='copy-6-icon' d='M360.277,151.999V50.001H50v310.137h102v101.861h310v-310H360.277z M90,320.138V90.001h230.277v61.998 H152v168.139H90z M421.5,421.499h-230V191.832h20.569c10.639,0,20.745,4.656,27.657,12.744l19.023,22.256H358l19.366-22.408 c6.911-7.996,16.958-12.592,27.528-12.592H421.5V421.499z M379.479,338.581h-145.99v-29h145.99V338.581z M379.479,286.249h-145.99 v-29h145.99V286.249z M233.488,361.999h146.023v29H233.488V361.999z' fill='#{$lsg-background-color}'/></svg>");
99
+ $lsg-code-switch-hide: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='1000' width='1000'><path d='M0 523.831q5.859 -48.825 64.449 -109.368 78.12 -80.073 175.77 -128.898 128.898 -60.543 259.749 -60.543 29.295 0 58.59 1.953l74.214 -128.898q9.765 -15.624 23.436 -17.577 3.906 0 7.812 1.953l50.778 31.248q17.577 7.812 1.953 33.201l-56.637 101.556 -46.872 78.12 -41.013 72.261 -144.522 249.984 -41.013 72.261 -46.872 80.073 -56.637 99.603q-15.624 25.389 -31.248 15.624l-52.731 -31.248q-15.624 -7.812 0 -33.201l48.825 -85.932 -7.812 -3.906q-103.509 -52.731 -175.77 -128.898 -64.449 -72.261 -64.449 -109.368zm263.655 0q0 74.214 46.872 132.804l48.825 -83.979q-9.765 -23.436 -9.765 -48.825 0 -50.778 34.178 -90.815t84.956 -49.802l48.825 -83.979l-17.577 0q-97.65 0 -166.982 65.425t-69.332 159.169zm177.723 294.903l41.013 -70.308l17.577 0q97.65 0 166.982 -65.425t69.332 -159.169q0 -74.214 -46.872 -132.804l62.496 -109.368q1.953 1.953 3.906 2.929t3.906 .977q103.509 52.731 175.77 128.898 64.449 72.261 64.449 109.368 -5.859 48.825 -64.449 109.368 -78.12 80.073 -175.77 128.898 -128.898 60.543 -259.749 60.543 -25.389 0 -58.59 -3.906zm89.838 -154.287l109.368 -189.441q9.765 25.389 9.765 48.825 0 50.778 -34.178 89.838t-84.956 50.778z' fill='#{$lsg-background-color}'/></svg>");
100
+ $lsg-code-switch-show: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='1000' width='1000'><path d='M0 499.809q5.859 -48.825 64.449 -109.368 78.12 -80.073 175.77 -128.898 128.898 -60.543 259.749 -60.543 136.71 1.953 259.749 60.543 103.509 52.731 175.77 128.898 64.449 72.261 64.449 109.368 -5.859 48.825 -64.449 109.368 -78.12 80.073 -175.77 128.898 -128.898 60.543 -259.749 60.543 -136.71 -1.953 -259.749 -60.543 -103.509 -52.731 -175.77 -128.898 -64.449 -72.261 -64.449 -109.368zm263.655 0q0 93.744 69.332 159.169t166.982 65.425 166.982 -65.425 69.332 -159.169 -69.332 -159.169 -166.982 -65.425 -166.982 65.425 -69.332 159.169zm85.932 -.977q0 -59.567 43.943 -101.556t106.439 -41.989 106.439 41.989 43.943 101.556 -43.943 102.532 -106.439 42.966 -106.439 -42.966 -43.943 -102.532z' fill='#{$lsg-background-color}'/></svg>");
89
101
 
90
102
  //// BUTTONS ////
91
103
 
92
- $lsg--button-height: 2 * $lsg--gap-width !default;
93
- $lsg--button-width: $lsg--button-height !default;
104
+ $lsg-button-height: 2 * $lsg-gutter !default;
105
+ $lsg-button-width: $lsg-button-height !default;
94
106
 
95
107
  //// IMPORTS ////
96
108
 
@@ -100,5 +112,4 @@ $lsg--button-width: $lsg--button-height !default;
100
112
  @import "livingstyleguide/code";
101
113
  @import "livingstyleguide/color-swatches";
102
114
  @import "livingstyleguide/toggle-code";
103
- @import "livingstyleguide/before";
104
115
  @import "livingstyleguide/search-box";
@@ -1,23 +1,23 @@
1
- .lsg--code {
2
- @extend %lsg--reset;
3
- font-family: $lsg--code-font;
1
+ .lsg-code {
2
+ @extend %lsg-reset;
3
+ font-family: $lsg-code-font-family;
4
4
  }
5
5
 
6
- .lsg--code-span,
7
- .lsg--code-block {
8
- @extend %lsg--reset;
9
- background: $lsg--code-background;
10
- border-radius: $lsg--code-border-radius;
11
- color: $lsg--code-color;
6
+ .lsg-code-span,
7
+ .lsg-code-block {
8
+ @extend %lsg-reset;
9
+ background: $lsg-code-background;
10
+ border-radius: $lsg-code-border-radius;
11
+ color: $lsg-code-color;
12
12
  display: inline;
13
- font-size: $lsg--code-font-size;
13
+ font-size: $lsg-code-font-size;
14
14
  -webkit-font-smoothing: subpixel-antialiased;
15
15
  font-style: normal;
16
- font-weight: $lsg--code-font-weight;
16
+ font-weight: $lsg-code-font-weight;
17
17
  padding: 0 3px;
18
18
 
19
19
  kbd {
20
- @extend %lsg--reset;
20
+ @extend %lsg-reset;
21
21
  display: block;
22
22
  font-weight: bold;
23
23
 
@@ -27,8 +27,8 @@
27
27
  }
28
28
 
29
29
  em {
30
- @extend %lsg--reset;
31
- color: lighten($lsg--code-color, 10%);
30
+ @extend %lsg-reset;
31
+ color: lighten($lsg-code-color, 10%);
32
32
  display: inline;
33
33
  font-style: normal;
34
34
  font-weight: bold;
@@ -37,23 +37,23 @@
37
37
  }
38
38
 
39
39
  b {
40
- @extend %lsg--reset;
41
- color: lighten($lsg--code-color, 20%);
40
+ @extend %lsg-reset;
41
+ color: lighten($lsg-code-color, 20%);
42
42
  display: inline;
43
43
  font-weight: bold;
44
44
  vertical-align: baseline;
45
45
  }
46
46
 
47
47
  i {
48
- @extend %lsg--reset;
49
- color: lighten($lsg--code-color, 30%);
48
+ @extend %lsg-reset;
49
+ color: lighten($lsg-code-color, 30%);
50
50
  display: inline;
51
51
  vertical-align: baseline;
52
52
  }
53
53
 
54
54
  q {
55
- @extend %lsg--reset;
56
- color: lighten($lsg--code-color, 30%);
55
+ @extend %lsg-reset;
56
+ color: lighten($lsg-code-color, 30%);
57
57
  display: inline;
58
58
  vertical-align: baseline;
59
59
 
@@ -64,21 +64,21 @@
64
64
  }
65
65
 
66
66
  var {
67
- @extend %lsg--reset;
67
+ @extend %lsg-reset;
68
68
  display: inline;
69
69
  text-decoration: underline;
70
70
  vertical-align: baseline;
71
71
  }
72
72
  }
73
73
 
74
- .lsg--code-block {
74
+ .lsg-code-block {
75
75
  display: block;
76
- line-height: $lsg--code-line-height;
76
+ line-height: $lsg-code-line-height;
77
77
  margin: auto;
78
- max-width: $lsg--width;
79
- min-height: $lsg--gap-width + $lsg--button-height;
78
+ max-width: $lsg-width;
79
+ min-height: $lsg-gutter + $lsg-button-height;
80
80
  -ms-overflow-style: none;
81
- padding: $lsg--code-padding;
81
+ padding: $lsg-code-padding;
82
82
  position: relative;
83
83
 
84
84
  &::-webkit-scrollbar {
@@ -87,62 +87,62 @@
87
87
  }
88
88
  }
89
89
 
90
- .lsg--example + .lsg--code-block {
90
+ .lsg-example + .lsg-code-block {
91
91
  border-top-left-radius: 0;
92
92
  border-top-right-radius: 0;
93
93
  margin-top: 0;
94
94
  }
95
95
 
96
- .lsg--layout-example + .lsg--code-block {
97
- background: $lsg--code-background-color;
96
+ .lsg-layout-example + .lsg-code-block {
97
+ background: $lsg-code-background-color;
98
98
  border-radius: 0;
99
- margin: 0 0 $lsg--gap-width;
100
- padding: $lsg--gap-width 0;
99
+ margin: 0 0 $lsg-gutter;
100
+ padding: $lsg-gutter 0;
101
101
  width: 100%;
102
102
 
103
- .lsg--code {
103
+ .lsg-code {
104
104
  display: block;
105
105
  margin: auto;
106
- max-width: $lsg--width;
106
+ max-width: $lsg-width;
107
107
  }
108
108
  }
109
109
 
110
- .lsg--button {
111
- background-color: $lsg--color;
112
- background-image: $lsg--copy-background-image;
110
+ .lsg-button {
111
+ background-color: $lsg-color;
112
+ background-image: $lsg-copy-background-image;
113
113
  background-position: 50%;
114
114
  background-repeat: no-repeat;
115
115
  background-size: 70%;
116
116
  border: 0;
117
- border-radius: $lsg--color-swatch-border-radius;
118
- bottom: $lsg--gap-width;
117
+ border-radius: $lsg-color-swatch-border-radius;
118
+ bottom: $lsg-gutter;
119
119
  cursor: pointer;
120
- height: $lsg--button-height;
120
+ height: $lsg-button-height;
121
121
  outline: 0;
122
122
  position: absolute;
123
- right: $lsg--gap-width;
123
+ right: $lsg-gutter;
124
124
  transition: transform 0.2s;
125
125
  visibility: hidden;
126
- width: $lsg--button-width;
126
+ width: $lsg-button-width;
127
127
 
128
128
  &:hover {
129
- background-color: mix($lsg--color, $lsg--background-color, 80%);
129
+ background-color: mix($lsg-color, $lsg-background-color, 80%);
130
130
  }
131
131
 
132
132
  &:active {
133
133
  transform: scale(0.9);
134
134
  }
135
135
 
136
- .lsg--code-block:hover & {
136
+ .lsg-code-block:hover & {
137
137
  visibility: visible;
138
138
  }
139
139
  }
140
140
 
141
- .lsg--code-highlight {
142
- @extend %lsg--reset;
143
- background-color: $lsg--highlight-background-color;
144
- border-radius: $lsg--highlight-border-radius;
145
- color: $lsg--highlight-color;
141
+ .lsg-code-highlight {
142
+ @extend %lsg-reset;
143
+ background-color: $lsg-highlight-background-color;
144
+ border-radius: $lsg-highlight-border-radius;
145
+ color: $lsg-highlight-color;
146
146
  display: inline;
147
147
  font-style: inherit;
148
148
  font-weight: inherit;
@@ -157,8 +157,8 @@
157
157
  }
158
158
  }
159
159
 
160
- .lsg--code-highlight-block {
161
- @extend %lsg--reset;
162
- @extend .lsg--code-highlight;
160
+ .lsg-code-highlight-block {
161
+ @extend %lsg-reset;
162
+ @extend .lsg-code-highlight;
163
163
  display: block;
164
164
  }