jekyll-theme-primer 0.5.1 → 0.6.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +5 -5
  2. data/LICENSE.md +1 -1
  3. data/README.md +39 -13
  4. data/_includes/head-custom-google-analytics.html +10 -0
  5. data/_includes/head-custom.html +9 -0
  6. data/_layouts/default.html +7 -5
  7. data/_layouts/home.html +4 -0
  8. data/_layouts/page.html +4 -0
  9. data/_layouts/post.html +4 -0
  10. data/_sass/primer-base/lib/base.scss +17 -0
  11. data/_sass/primer-base/lib/normalize.scss +2 -4
  12. data/_sass/primer-layout/lib/grid-offset.scss +12 -23
  13. data/_sass/primer-markdown/lib/code.scss +3 -16
  14. data/_sass/primer-markdown/lib/lists.scss +5 -1
  15. data/_sass/primer-markdown/lib/markdown-body.scss +1 -1
  16. data/_sass/primer-support/lib/mixins/buttons.scss +13 -9
  17. data/_sass/primer-support/lib/mixins/layout.scss +18 -12
  18. data/_sass/primer-support/lib/variables/layout.scss +15 -1
  19. data/_sass/primer-support/lib/variables/misc.scss +1 -1
  20. data/_sass/primer-utilities/index.scss +1 -0
  21. data/_sass/primer-utilities/lib/animations.scss +33 -2
  22. data/_sass/primer-utilities/lib/borders.scss +75 -38
  23. data/_sass/primer-utilities/lib/details.scss +18 -0
  24. data/_sass/primer-utilities/lib/flexbox.scss +45 -73
  25. data/_sass/primer-utilities/lib/layout.scss +16 -27
  26. data/_sass/primer-utilities/lib/margin.scss +42 -75
  27. data/_sass/primer-utilities/lib/padding.scss +26 -56
  28. data/_sass/primer-utilities/lib/typography.scss +22 -23
  29. data/_sass/primer-utilities/lib/visibility-display.scss +21 -45
  30. data/_sass/primer.scss +4 -0
  31. metadata +71 -72
  32. data/_sass/primer-base/LICENSE +0 -21
  33. data/_sass/primer-base/README.md +0 -48
  34. data/_sass/primer-base/build/build.css +0 -1
  35. data/_sass/primer-base/build/index.js +0 -1
  36. data/_sass/primer-base/package.json +0 -68
  37. data/_sass/primer-layout/LICENSE +0 -21
  38. data/_sass/primer-layout/README.md +0 -137
  39. data/_sass/primer-layout/build/build.css +0 -1
  40. data/_sass/primer-layout/build/index.js +0 -1
  41. data/_sass/primer-layout/package.json +0 -65
  42. data/_sass/primer-markdown/LICENSE +0 -21
  43. data/_sass/primer-markdown/README.md +0 -218
  44. data/_sass/primer-markdown/build/build.css +0 -1
  45. data/_sass/primer-markdown/build/index.js +0 -1
  46. data/_sass/primer-markdown/package.json +0 -69
  47. data/_sass/primer-support/LICENSE +0 -21
  48. data/_sass/primer-support/README.md +0 -42
  49. data/_sass/primer-support/package.json +0 -66
  50. data/_sass/primer-utilities/LICENSE +0 -21
  51. data/_sass/primer-utilities/README.md +0 -48
  52. data/_sass/primer-utilities/build/build.css +0 -1
  53. data/_sass/primer-utilities/build/index.js +0 -1
  54. data/_sass/primer-utilities/package.json +0 -65
  55. data/assets/javascript/anchor-js/.eslintrc +0 -77
  56. data/assets/javascript/anchor-js/.gitattributes +0 -2
  57. data/assets/javascript/anchor-js/.npmignore +0 -4
  58. data/assets/javascript/anchor-js/.travis.yml +0 -6
  59. data/assets/javascript/anchor-js/anchor.js +0 -334
  60. data/assets/javascript/anchor-js/anchor.min.js +0 -6
  61. data/assets/javascript/anchor-js/banner.js +0 -17
  62. data/assets/javascript/anchor-js/docs/anchor.js +0 -334
  63. data/assets/javascript/anchor-js/docs/favicon.ico +0 -0
  64. data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.eot +0 -0
  65. data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.svg +0 -11
  66. data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.ttf +0 -0
  67. data/assets/javascript/anchor-js/docs/fonts/anchorjs-extras.woff +0 -0
  68. data/assets/javascript/anchor-js/docs/fonts/fonts.css +0 -24
  69. data/assets/javascript/anchor-js/docs/grunticon/grunticon.loader.js +0 -3
  70. data/assets/javascript/anchor-js/docs/grunticon/icons.data.png.css +0 -5
  71. data/assets/javascript/anchor-js/docs/grunticon/icons.data.svg.css +0 -5
  72. data/assets/javascript/anchor-js/docs/grunticon/icons.fallback.css +0 -5
  73. data/assets/javascript/anchor-js/docs/grunticon/png/grunticon-link.png +0 -0
  74. data/assets/javascript/anchor-js/docs/grunticon/preview.html +0 -33
  75. data/assets/javascript/anchor-js/docs/img/anchoring-links.png +0 -0
  76. data/assets/javascript/anchor-js/docs/img/anchorjs_logo.png +0 -0
  77. data/assets/javascript/anchor-js/docs/img/anchorlinks2.png +0 -0
  78. data/assets/javascript/anchor-js/docs/img/gh-link.svg +0 -9
  79. data/assets/javascript/anchor-js/docs/img/gh_link.svg +0 -9
  80. data/assets/javascript/anchor-js/docs/img/hyperlink.svg +0 -9
  81. data/assets/javascript/anchor-js/docs/img/link.svg +0 -6
  82. data/assets/javascript/anchor-js/docs/img/mini-logo.png +0 -0
  83. data/assets/javascript/anchor-js/docs/img/primer-md.png +0 -0
  84. data/assets/javascript/anchor-js/docs/index.html +0 -807
  85. data/assets/javascript/anchor-js/docs/scripts.js +0 -12
  86. data/assets/javascript/anchor-js/docs/styles.css +0 -493
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: 448373e50ebfb04d622fc646ba208e08acefea85
4
- data.tar.gz: 9298e2f6345b4304eda5180684e7df6551b50c6b
2
+ SHA256:
3
+ metadata.gz: ca90b72e4871f1eb4d6b242f7b2b694598cdf3c03c1f14747e44be00c6798dc4
4
+ data.tar.gz: 5c513719e585c9befb96c9991fd412c7425bb4cb6e20d3bfffae896e85df2a1c
5
5
  SHA512:
6
- metadata.gz: 94caaa10609f72c37136a187663c3dcbbb25edd689976e0215fe3e7ff051116e5f4d8d4eed493c54e0b78eb2a02b98b261b667246c87eb9cb40d38c9ef9d8e38
7
- data.tar.gz: b00459b4c4aa783d6e22bc46e592fb153c5f40cf52bb3b75880abee38d056fb7e20750fd42768fee3acd628529933ca54cac2988f051db36d9f955e67718fea1
6
+ metadata.gz: ac0788b1abac6c78db45dcc2cadfd942ca02d6ff0808e3768c517dc9bd27c01a6c87bfaf665094c38c051ffa64edd4b73971f68ba063a1c6d135b1d85468a231
7
+ data.tar.gz: 68e1d761e48c3b7d70ebf209b115cf6aa46d852c0509d7b92a84c2275103d58a63b22167caa2b538c3a69b2db6b5bfe1ab84223b35ca872fea5c930e14370025
data/LICENSE.md CHANGED
@@ -1,6 +1,6 @@
1
1
  The MIT License (MIT)
2
2
 
3
- Copyright (c) 2016 Ben Balter
3
+ Copyright (c) 2016-2017 GitHub, Inc.
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
data/README.md CHANGED
@@ -1,9 +1,11 @@
1
1
  # The Primer theme
2
2
 
3
- [![Build Status](https://travis-ci.org/pages-themes/jekyll-theme-primer.svg?branch=master)](https://travis-ci.org/pages-themes/jekyll-theme-primer) [![Gem Version](https://badge.fury.io/rb/jekyll-theme-primer.svg)](https://badge.fury.io/rb/jekyll-theme-primer)
3
+ [![.github/workflows/ci.yaml](https://github.com/pages-themes/primer/actions/workflows/ci.yaml/badge.svg)](https://github.com/pages-themes/primer/actions/workflows/ci.yaml) [![Gem Version](https://badge.fury.io/rb/jekyll-theme-primer.svg)](https://badge.fury.io/rb/jekyll-theme-primer)
4
4
 
5
5
  *Primer is a Jekyll theme for GitHub Pages. You can [preview the theme to see what it looks like](http://pages-themes.github.io/primer), or even [use it today](#usage).*
6
6
 
7
+ ![Thumbnail of Primer](thumbnail.png)
8
+
7
9
  ## Usage
8
10
 
9
11
  To use the Primer theme:
@@ -11,7 +13,9 @@ To use the Primer theme:
11
13
  1. Add the following to your site's `_config.yml`:
12
14
 
13
15
  ```yml
14
- theme: jekyll-theme-primer
16
+ remote_theme: pages-themes/primer@v0.2.0
17
+ plugins:
18
+ - jekyll-remote-theme # add this line to the plugins list if you already have one
15
19
  ```
16
20
 
17
21
  2. Optionally, if you'd like to preview your site on your computer, add the following to your site's `Gemfile`:
@@ -20,8 +24,6 @@ To use the Primer theme:
20
24
  gem "github-pages", group: :jekyll_plugins
21
25
  ```
22
26
 
23
-
24
-
25
27
  ## Customizing
26
28
 
27
29
  ### Configuration variables
@@ -36,7 +38,7 @@ description: [A short description of your site's purpose]
36
38
  Additionally, you may choose to set the following optional variables:
37
39
 
38
40
  ```yml
39
- show_downloads: ["true" or "false" to indicate whether to provide a download URL]
41
+ show_downloads: ["true" or "false" (unquoted) to indicate whether to provide a download URL]
40
42
  google_analytics: [Your Google Analytics tracking ID]
41
43
  ```
42
44
 
@@ -44,7 +46,7 @@ google_analytics: [Your Google Analytics tracking ID]
44
46
 
45
47
  If you'd like to add your own custom styles:
46
48
 
47
- 1. Create a file called `/assets/css/style.css` in your site
49
+ 1. Create a file called `/assets/css/style.scss` in your site
48
50
  2. Add the following content to the top of the file, exactly as shown:
49
51
  ```scss
50
52
  ---
@@ -54,18 +56,42 @@ If you'd like to add your own custom styles:
54
56
  ```
55
57
  3. Add any custom CSS (or Sass, including imports) you'd like immediately after the `@import` line
56
58
 
59
+ *Note: If you'd like to change the theme's Sass variables, you must set new values before the `@import` line in your stylesheet.*
60
+
57
61
  ### Layouts
58
62
 
59
63
  If you'd like to change the theme's HTML layout:
60
64
 
61
- 1. [Copy the original template](https://github.com/pages-themes/primer/blob/master/_layouts/default.html) from the theme's repository<br />(*Pro-tip: click "raw" to make copying easier*)
62
- 2. Create a file called `/_layouts/default.html` in your site
63
- 3. Paste the default layout content copied in the first step
64
- 4. Customize the layout as you'd like
65
+ 1. For some changes such as a custom `favicon`, you can add custom files in your local `_includes` folder. The files [provided with the theme](https://github.com/pages-themes/primer/tree/master/_includes) provide a starting point and are included by the [original layout template](https://github.com/pages-themes/primer/blob/master/_layouts/default.html).
66
+ 2. For more extensive changes, [copy the original template](https://github.com/pages-themes/primer/blob/master/_layouts/default.html) from the theme's repository<br />(*Pro-tip: click "raw" to make copying easier*)
67
+ 3. Create a file called `/_layouts/default.html` in your site
68
+ 4. Paste the default layout content copied in the first step
69
+ 5. Customize the layout as you'd like
70
+
71
+ ### Customizing Google Analytics code
72
+
73
+ Google has released several iterations to their Google Analytics code over the years since this theme was first created. If you would like to take advantage of the latest code, paste it into `_includes/head-custom-google-analytics.html` in your Jekyll site.
74
+
75
+ ### Overriding GitHub-generated URLs
76
+
77
+ Templates often rely on URLs supplied by GitHub such as links to your repository or links to download your project. If you'd like to override one or more default URLs:
78
+
79
+ 1. Look at [the template source](https://github.com/pages-themes/primer/blob/master/_layouts/default.html) to determine the name of the variable. It will be in the form of `{{ site.github.zip_url }}`.
80
+ 2. Specify the URL that you'd like the template to use in your site's `_config.yml`. For example, if the variable was `site.github.url`, you'd add the following:
81
+ ```yml
82
+ github:
83
+ zip_url: http://example.com/download.zip
84
+ another_url: another value
85
+ ```
86
+ 3. When your site is built, Jekyll will use the URL you specified, rather than the default one provided by GitHub.
87
+
88
+ *Note: You must remove the `site.` prefix, and each variable name (after the `github.`) should be indent with two space below `github:`.*
89
+
90
+ For more information, see [the Jekyll variables documentation](https://jekyllrb.com/docs/variables/).
65
91
 
66
92
  ## Roadmap
67
93
 
68
- See the [open issues](https://github.com/pagse-themes/primer/issues) for a list of proposed features (and known issues).
94
+ See the [open issues](https://github.com/pages-themes/primer/issues) for a list of proposed features (and known issues).
69
95
 
70
96
  ## Project philosophy
71
97
 
@@ -73,7 +99,7 @@ The Primer theme is intended to make it quick and easy for GitHub Pages users to
73
99
 
74
100
  ## Contributing
75
101
 
76
- Interested in contributing to Primer? We'd love your help. Primer is an open source project, built one contribution at a time by users like you. See [the CONTRIBUTING file](CONTRIBUTING.md) for instructions on how to contribute.
102
+ Interested in contributing to Primer? We'd love your help. Primer is an open source project, built one contribution at a time by users like you. See [the CONTRIBUTING file](docs/CONTRIBUTING.md) for instructions on how to contribute.
77
103
 
78
104
  ### Previewing the theme locally
79
105
 
@@ -87,4 +113,4 @@ If you'd like to preview the theme locally (for example, in the process of propo
87
113
 
88
114
  ### Running tests
89
115
 
90
- The theme contains a minimal test suite, to ensure a site with the theme would build successfully. To run the tests, simply run `script/cibuild`. You'll need to run `script/bootstrap` one before the test script will work.
116
+ The theme contains a minimal test suite, to ensure a site with the theme would build successfully. To run the tests, simply run `script/cibuild`. You'll need to run `script/bootstrap` once before the test script will work.
@@ -0,0 +1,10 @@
1
+ {% if site.google_analytics %}
2
+ <script>
3
+ (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
4
+ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
5
+ m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
6
+ })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
7
+ ga('create', '{{ site.google_analytics }}', 'auto');
8
+ ga('send', 'pageview');
9
+ </script>
10
+ {% endif %}
@@ -0,0 +1,9 @@
1
+ <!-- start custom head snippets, customize with your own _includes/head-custom.html file -->
2
+
3
+ <!-- Setup Google Analytics -->
4
+ {% include head-custom-google-analytics.html %}
5
+
6
+ <!-- You can set your favicon here -->
7
+ <!-- link rel="shortcut icon" type="image/x-icon" href="{{ '/favicon.ico' | relative_url }}" -->
8
+
9
+ <!-- end custom head snippets -->
@@ -1,27 +1,29 @@
1
1
  <!DOCTYPE html>
2
- <html lang="en">
2
+ <html lang="{{ site.lang | default: "en-US" }}">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
5
6
  <meta name="viewport" content="width=device-width, initial-scale=1">
6
7
 
7
8
  {% seo %}
8
- <link href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}" rel="stylesheet">
9
+ <link rel="stylesheet" href="{{ "/assets/css/style.css?v=" | append: site.github.build_revision | relative_url }}">
10
+ {% include head-custom.html %}
9
11
  </head>
10
12
  <body>
11
13
  <div class="container-lg px-3 my-5 markdown-body">
12
14
  {% if site.title and site.title != page.title %}
13
- <h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
15
+ <h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
14
16
  {% endif %}
15
17
 
16
18
  {{ content }}
17
19
 
18
20
  {% if site.github.private != true and site.github.license %}
19
21
  <div class="footer border-top border-gray-light mt-5 pt-3 text-right text-gray">
20
- This site is open source. <a href="{{ site.github.repository_url }}/edit/{{ site.github.source.branch }}{{ site.github.source.path }}/{{ page.path }}">Help improve this page</a>.
22
+ This site is open source. {% github_edit_link "Improve this page" %}.
21
23
  </div>
22
24
  {% endif %}
23
25
  </div>
24
- <script src="{{ "assets/javascript/anchor-js/anchor.min.js" | relative_url }}"></script>
26
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
25
27
  <script>anchors.add();</script>
26
28
  </body>
27
29
  </html>
@@ -0,0 +1,4 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {{ content }}
@@ -0,0 +1,4 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {{ content }}
@@ -0,0 +1,4 @@
1
+ ---
2
+ layout: default
3
+ ---
4
+ {{ content }}
@@ -64,4 +64,21 @@ th {
64
64
 
65
65
  button {
66
66
  cursor: pointer;
67
+ // Remove border radius added by Chroma macOS
68
+ border-radius: 0;
69
+ }
70
+
71
+ // increase the selector specificity for [hidden]
72
+ // so that it always overrides utility classes (.d-block, etc.)
73
+ [hidden][hidden] {
74
+ display: none !important;
75
+ }
76
+
77
+ details {
78
+ summary { cursor: pointer; }
79
+
80
+ &:not([open]) {
81
+ // Set details content hidden by default for browsers that don't do this
82
+ > *:not(summary) { display: none !important; }
83
+ }
67
84
  }
@@ -82,20 +82,18 @@ progress {
82
82
 
83
83
  template, /* 1 */
84
84
  [hidden] {
85
- display: none;
85
+ display: none !important;
86
86
  }
87
87
 
88
88
  /* Links
89
89
  ========================================================================== */
90
90
 
91
91
  /**
92
- * 1. Remove the gray background on active links in IE 10.
93
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
92
+ * Remove the gray background on active links in IE 10.
94
93
  */
95
94
 
96
95
  a {
97
96
  background-color: transparent; /* 1 */
98
- -webkit-text-decoration-skip: objects; /* 2 */
99
97
  }
100
98
 
101
99
  /**
@@ -1,30 +1,19 @@
1
1
  // Optional offset options to work with grid.scss
2
2
 
3
3
  // Offset Columns
4
- .offset-1 { margin-left: (1 / 12 * 100%); }
5
- .offset-2 { margin-left: (2 / 12 * 100%); }
6
- .offset-3 { margin-left: (3 / 12 * 100%); }
7
- .offset-4 { margin-left: (4 / 12 * 100%); }
8
- .offset-5 { margin-left: (5 / 12 * 100%); }
9
- .offset-6 { margin-left: (6 / 12 * 100%); }
10
- .offset-7 { margin-left: (7 / 12 * 100%); }
11
- .offset-8 { margin-left: (8 / 12 * 100%); }
12
- .offset-9 { margin-left: (9 / 12 * 100%); }
13
- .offset-10 { margin-left: (10 / 12 * 100%); }
14
- .offset-11 { margin-left: (11 / 12 * 100%); }
15
4
 
16
- @each $breakpoint in map-keys($breakpoints) {
5
+ @each $breakpoint, $variant in $responsive-variants {
17
6
  @include breakpoint($breakpoint) {
18
- .offset-#{$breakpoint}-1 { margin-left: (1 / 12 * 100%); }
19
- .offset-#{$breakpoint}-2 { margin-left: (2 / 12 * 100%); }
20
- .offset-#{$breakpoint}-3 { margin-left: (3 / 12 * 100%); }
21
- .offset-#{$breakpoint}-4 { margin-left: (4 / 12 * 100%); }
22
- .offset-#{$breakpoint}-5 { margin-left: (5 / 12 * 100%); }
23
- .offset-#{$breakpoint}-6 { margin-left: (6 / 12 * 100%); }
24
- .offset-#{$breakpoint}-7 { margin-left: (7 / 12 * 100%); }
25
- .offset-#{$breakpoint}-8 { margin-left: (8 / 12 * 100%); }
26
- .offset-#{$breakpoint}-9 { margin-left: (9 / 12 * 100%); }
27
- .offset-#{$breakpoint}-10 { margin-left: (10 / 12 * 100%); }
28
- .offset-#{$breakpoint}-11 { margin-left: (11 / 12 * 100%); }
7
+ .offset#{$variant}-1 { margin-left: (1 / 12 * 100%) !important; }
8
+ .offset#{$variant}-2 { margin-left: (2 / 12 * 100%) !important; }
9
+ .offset#{$variant}-3 { margin-left: (3 / 12 * 100%) !important; }
10
+ .offset#{$variant}-4 { margin-left: (4 / 12 * 100%) !important; }
11
+ .offset#{$variant}-5 { margin-left: (5 / 12 * 100%) !important; }
12
+ .offset#{$variant}-6 { margin-left: (6 / 12 * 100%) !important; }
13
+ .offset#{$variant}-7 { margin-left: (7 / 12 * 100%) !important; }
14
+ .offset#{$variant}-8 { margin-left: (8 / 12 * 100%) !important; }
15
+ .offset#{$variant}-9 { margin-left: (9 / 12 * 100%) !important; }
16
+ .offset#{$variant}-10 { margin-left: (10 / 12 * 100%) !important; }
17
+ .offset#{$variant}-11 { margin-left: (11 / 12 * 100%) !important; }
29
18
  }
30
19
  }
@@ -3,19 +3,11 @@
3
3
  // Inline code snippets
4
4
  code,
5
5
  tt {
6
- padding: 0;
7
- padding-top: 0.2em;
8
- padding-bottom: 0.2em;
6
+ padding: 0.2em 0.4em;
9
7
  margin: 0;
10
8
  font-size: 85%;
11
9
  background-color: rgba($black, 0.05);
12
- border-radius: 3px; // don't add padding, gives scrollbars
13
-
14
- &::before,
15
- &::after {
16
- letter-spacing: -0.2em; // this creates padding
17
- content: "\00a0";
18
- }
10
+ border-radius: $border-radius;
19
11
 
20
12
  br { display: none; }
21
13
  }
@@ -53,7 +45,7 @@
53
45
  font-size: 85%;
54
46
  line-height: 1.45;
55
47
  background-color: $gray-100;
56
- border-radius: 3px;
48
+ border-radius: $border-radius;
57
49
  }
58
50
 
59
51
  pre code,
@@ -67,10 +59,5 @@
67
59
  word-wrap: normal;
68
60
  background-color: transparent;
69
61
  border: 0;
70
-
71
- &::before,
72
- &::after {
73
- content: normal;
74
- }
75
62
  }
76
63
  }
@@ -45,12 +45,16 @@
45
45
  margin-bottom: 0;
46
46
  }
47
47
 
48
+ li {
49
+ word-wrap: break-all;
50
+ }
51
+
48
52
  li > p {
49
53
  margin-top: $spacer-3;
50
54
  }
51
55
 
52
56
  li + li {
53
- margin-top: 0.25em;
57
+ margin-top: $em-spacer-3;
54
58
  }
55
59
 
56
60
  dl {
@@ -69,7 +69,7 @@
69
69
  }
70
70
 
71
71
  hr {
72
- height: 0.25em;
72
+ height: $em-spacer-3;
73
73
  padding: 0;
74
74
  margin: $spacer-4 0;
75
75
  background-color: $gray-200;
@@ -18,12 +18,13 @@
18
18
  &.hover {
19
19
  background-color: darken($bg2, 3%);
20
20
  background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
21
- background-position: 0 -0.5em;
21
+ background-position: 0 -$em-spacer-5;
22
22
  border-color: rgba($black, 0.35);
23
23
  }
24
24
 
25
25
  &:active,
26
- &.selected {
26
+ &.selected,
27
+ [open] > & {
27
28
  background-color: darken(desaturate($bg, 10%), 6%);
28
29
  background-image: none;
29
30
  border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
@@ -42,19 +43,20 @@
42
43
  } @else {
43
44
  &:focus,
44
45
  &.focus {
45
- box-shadow: 0 0 0 0.2em rgba($bg, 0.3);
46
+ box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
46
47
  }
47
48
 
48
49
  &:hover,
49
50
  &.hover {
50
51
  background-color: darken($bg2, 2%);
51
52
  background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
52
- background-position: 0 -0.5em;
53
+ background-position: 0 -$em-spacer-5;
53
54
  border-color: $black-fade-50;
54
55
  }
55
56
 
56
57
  &:active,
57
- &.selected {
58
+ &.selected,
59
+ [open] > & {
58
60
  background-color: darken(mix($bg, $bg2, 50%), 7%);
59
61
  background-image: none;
60
62
  border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
@@ -84,7 +86,7 @@
84
86
  background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
85
87
 
86
88
  &:focus {
87
- box-shadow: 0 0 0 0.2em rgba($color, 0.3);
89
+ box-shadow: 0 0 0 0.2em rgba($color, 0.4);
88
90
  }
89
91
 
90
92
  &:hover {
@@ -99,7 +101,8 @@
99
101
  }
100
102
 
101
103
  &:active,
102
- &.selected {
104
+ &.selected,
105
+ [open] > & {
103
106
  color: $text-white;
104
107
  background-color: darken($color, 5%);
105
108
  background-image: none;
@@ -129,7 +132,8 @@
129
132
 
130
133
  &:hover,
131
134
  &:active,
132
- &.selected {
135
+ &.selected,
136
+ [open] > & {
133
137
  color: $bg-color;
134
138
  background-color: $text-color;
135
139
  background-image: none;
@@ -143,7 +147,7 @@
143
147
 
144
148
  &:focus {
145
149
  border-color: $text-color;
146
- box-shadow: 0 0 0 0.2em rgba($text-color, 0.3);
150
+ box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
147
151
  }
148
152
 
149
153
  &:disabled,