livingstyleguide 2.0.0.pre.3 → 2.0.0.pre.4
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/bin/livingstyleguide +1 -1
- data/lib/livingstyleguide/command_line_interface.rb +14 -11
- data/lib/livingstyleguide/commands/colors.rb +16 -16
- data/lib/livingstyleguide/commands/default.rb +1 -1
- data/lib/livingstyleguide/commands/font_example.rb +2 -1
- data/lib/livingstyleguide/commands/full_width.rb +1 -1
- data/lib/livingstyleguide/commands/import_and_use.rb +16 -4
- data/lib/livingstyleguide/commands/layout.rb +22 -20
- data/lib/livingstyleguide/commands/options.rb +9 -9
- data/lib/livingstyleguide/commands/sass.rb +5 -11
- data/lib/livingstyleguide/commands/search_box.rb +6 -3
- data/lib/livingstyleguide/commands/style.rb +1 -1
- data/lib/livingstyleguide/document.rb +64 -41
- data/lib/livingstyleguide/integration/compass.rb +5 -2
- data/lib/livingstyleguide/integration/rails.rb +5 -3
- data/lib/livingstyleguide/integration/sass.rb +1 -1
- data/lib/livingstyleguide/integration/sprockets.rb +9 -4
- data/lib/livingstyleguide/markdown_extensions.rb +20 -11
- data/lib/livingstyleguide/templates/code.html.erb +1 -1
- data/lib/livingstyleguide/templates/example.html.erb +2 -2
- data/lib/livingstyleguide/templates/font-example.html.erb +3 -3
- data/lib/livingstyleguide/templates/javascript.html.erb +1 -1
- data/lib/livingstyleguide/templates/layout.html.erb +32 -38
- data/lib/livingstyleguide/templates/logo.html.erb +1 -1
- data/lib/livingstyleguide/templates/scripts/copy.js.erb +12 -12
- data/lib/livingstyleguide/templates/scripts/copy_code.js.erb +7 -7
- data/lib/livingstyleguide/templates/scripts/copy_colors.js.erb +14 -14
- data/lib/livingstyleguide/templates/scripts/search.js.erb +30 -30
- data/lib/livingstyleguide/templates/scripts/toggle_code.js.erb +23 -23
- data/lib/livingstyleguide/templates/search-box.html.erb +1 -1
- data/lib/livingstyleguide/templates/toggle-code.html.erb +1 -1
- data/lib/livingstyleguide/tilt_template.rb +17 -19
- data/lib/livingstyleguide/version.rb +1 -1
- data/lib/livingstyleguide.rb +12 -2
- data/stylesheets/_livingstyleguide.scss +76 -65
- data/stylesheets/livingstyleguide/_code.scss +51 -51
- data/stylesheets/livingstyleguide/_color-swatches.scss +38 -38
- data/stylesheets/livingstyleguide/_content.scss +73 -73
- data/stylesheets/livingstyleguide/_functions.scss +1 -1
- data/stylesheets/livingstyleguide/_layout.scss +22 -22
- data/stylesheets/livingstyleguide/_reset.scss +1 -1
- data/stylesheets/livingstyleguide/_search-box.scss +14 -14
- data/stylesheets/livingstyleguide/_toggle-code.scss +10 -11
- 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
|
|
34
|
+
var hideCode = localStorage.getItem("lsg-hide-code")
|
|
35
35
|
|
|
36
36
|
if (hideCode == "true") {
|
|
37
|
-
addClass(html, "lsg
|
|
37
|
+
addClass(html, "lsg-hide-code")
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
function toggleCode(event) {
|
|
41
|
-
event.preventDefault()
|
|
42
|
-
var hideCode = toggleClass(html, "lsg
|
|
43
|
-
localStorage.setItem("lsg
|
|
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
|
|
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
|
|
1
|
+
<input class="lsg-search-box" placeholder="<%= placeholder %>" type="search">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<
|
|
1
|
+
<button class="lsg-code-switch" type="button"></button>
|
|
@@ -1,27 +1,28 @@
|
|
|
1
|
-
require
|
|
2
|
-
require
|
|
3
|
-
require
|
|
4
|
-
require
|
|
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 =
|
|
8
|
+
self.default_mime_type = "text/html"
|
|
9
9
|
|
|
10
10
|
def prepare
|
|
11
11
|
end
|
|
12
12
|
|
|
13
|
-
def evaluate(scope,
|
|
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__),
|
|
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] ==
|
|
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.
|
|
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,
|
|
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)
|
|
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
|
|
84
|
-
if File.exists?(File.join(path,
|
|
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(
|
|
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
|
data/lib/livingstyleguide.rb
CHANGED
|
@@ -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
|
|
5
|
+
$lsg-layout-selector: body !default;
|
|
6
6
|
|
|
7
|
-
//// TYPOGRAPHY ////
|
|
7
|
+
//// GLOBAL TYPOGRAPHY ////
|
|
8
8
|
|
|
9
|
-
$lsg
|
|
10
|
-
$lsg
|
|
11
|
-
$lsg
|
|
12
|
-
$lsg
|
|
13
|
-
$lsg
|
|
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
|
|
15
|
+
$lsg-page-title-font-size: 42px !default;
|
|
16
16
|
|
|
17
|
-
|
|
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
|
|
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
|
|
25
|
+
$lsg-sub-headline-font-size: 21px !default;
|
|
26
26
|
|
|
27
|
-
$lsg
|
|
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
|
-
|
|
29
|
+
//// CODE TYPOGRAPHY ////
|
|
34
30
|
|
|
35
|
-
|
|
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
|
-
|
|
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
|
-
|
|
49
|
-
|
|
50
|
-
|
|
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
|
|
55
|
-
4 - (lightness($lsg
|
|
58
|
+
$lsg-adjust-lightness:
|
|
59
|
+
4 - (lightness($lsg-background-color) - lightness($lsg-color)) / 25
|
|
56
60
|
!default !global;
|
|
57
61
|
}
|
|
58
62
|
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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
|
|
65
|
-
$lsg
|
|
66
|
-
mix($lsg
|
|
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
|
|
69
|
-
$lsg
|
|
70
|
-
$lsg
|
|
71
|
-
$lsg
|
|
72
|
-
$lsg
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
$lsg
|
|
77
|
-
$lsg
|
|
78
|
-
$lsg
|
|
79
|
-
|
|
80
|
-
$lsg
|
|
81
|
-
|
|
82
|
-
|
|
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
|
|
87
|
-
$lsg
|
|
88
|
-
$lsg
|
|
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
|
|
93
|
-
$lsg
|
|
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
|
|
2
|
-
@extend %lsg
|
|
3
|
-
font-family: $lsg
|
|
1
|
+
.lsg-code {
|
|
2
|
+
@extend %lsg-reset;
|
|
3
|
+
font-family: $lsg-code-font-family;
|
|
4
4
|
}
|
|
5
5
|
|
|
6
|
-
.lsg
|
|
7
|
-
.lsg
|
|
8
|
-
@extend %lsg
|
|
9
|
-
background: $lsg
|
|
10
|
-
border-radius: $lsg
|
|
11
|
-
color: $lsg
|
|
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
|
|
13
|
+
font-size: $lsg-code-font-size;
|
|
14
14
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
15
15
|
font-style: normal;
|
|
16
|
-
font-weight: $lsg
|
|
16
|
+
font-weight: $lsg-code-font-weight;
|
|
17
17
|
padding: 0 3px;
|
|
18
18
|
|
|
19
19
|
kbd {
|
|
20
|
-
@extend %lsg
|
|
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
|
|
31
|
-
color: lighten($lsg
|
|
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
|
|
41
|
-
color: lighten($lsg
|
|
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
|
|
49
|
-
color: lighten($lsg
|
|
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
|
|
56
|
-
color: lighten($lsg
|
|
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
|
|
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
|
|
74
|
+
.lsg-code-block {
|
|
75
75
|
display: block;
|
|
76
|
-
line-height: $lsg
|
|
76
|
+
line-height: $lsg-code-line-height;
|
|
77
77
|
margin: auto;
|
|
78
|
-
max-width: $lsg
|
|
79
|
-
min-height: $lsg
|
|
78
|
+
max-width: $lsg-width;
|
|
79
|
+
min-height: $lsg-gutter + $lsg-button-height;
|
|
80
80
|
-ms-overflow-style: none;
|
|
81
|
-
padding: $lsg
|
|
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
|
|
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
|
|
97
|
-
background: $lsg
|
|
96
|
+
.lsg-layout-example + .lsg-code-block {
|
|
97
|
+
background: $lsg-code-background-color;
|
|
98
98
|
border-radius: 0;
|
|
99
|
-
margin: 0 0 $lsg
|
|
100
|
-
padding: $lsg
|
|
99
|
+
margin: 0 0 $lsg-gutter;
|
|
100
|
+
padding: $lsg-gutter 0;
|
|
101
101
|
width: 100%;
|
|
102
102
|
|
|
103
|
-
.lsg
|
|
103
|
+
.lsg-code {
|
|
104
104
|
display: block;
|
|
105
105
|
margin: auto;
|
|
106
|
-
max-width: $lsg
|
|
106
|
+
max-width: $lsg-width;
|
|
107
107
|
}
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
.lsg
|
|
111
|
-
background-color: $lsg
|
|
112
|
-
background-image: $lsg
|
|
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
|
|
118
|
-
bottom: $lsg
|
|
117
|
+
border-radius: $lsg-color-swatch-border-radius;
|
|
118
|
+
bottom: $lsg-gutter;
|
|
119
119
|
cursor: pointer;
|
|
120
|
-
height: $lsg
|
|
120
|
+
height: $lsg-button-height;
|
|
121
121
|
outline: 0;
|
|
122
122
|
position: absolute;
|
|
123
|
-
right: $lsg
|
|
123
|
+
right: $lsg-gutter;
|
|
124
124
|
transition: transform 0.2s;
|
|
125
125
|
visibility: hidden;
|
|
126
|
-
width: $lsg
|
|
126
|
+
width: $lsg-button-width;
|
|
127
127
|
|
|
128
128
|
&:hover {
|
|
129
|
-
background-color: mix($lsg
|
|
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
|
|
136
|
+
.lsg-code-block:hover & {
|
|
137
137
|
visibility: visible;
|
|
138
138
|
}
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
.lsg
|
|
142
|
-
@extend %lsg
|
|
143
|
-
background-color: $lsg
|
|
144
|
-
border-radius: $lsg
|
|
145
|
-
color: $lsg
|
|
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
|
|
161
|
-
@extend %lsg
|
|
162
|
-
@extend .lsg
|
|
160
|
+
.lsg-code-highlight-block {
|
|
161
|
+
@extend %lsg-reset;
|
|
162
|
+
@extend .lsg-code-highlight;
|
|
163
163
|
display: block;
|
|
164
164
|
}
|