activeadmin_blaze_theme 0.6.2 → 0.7.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (206) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +44 -5
  3. data/app/assets/stylesheets/activeadmin_blaze_theme/_contents.scss +1 -0
  4. data/app/assets/stylesheets/activeadmin_blaze_theme/_form.scss +3 -0
  5. data/app/assets/stylesheets/activeadmin_blaze_theme/_tables.scss +1 -1
  6. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/blaze.colors.scss +30 -0
  7. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/blaze.scss +43 -49
  8. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.addresses.scss +12 -0
  9. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.alerts.scss +59 -0
  10. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.avatars.scss +36 -0
  11. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.badges.scss +60 -0
  12. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.breadcrumbs.scss +20 -0
  13. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.bubbles.scss +49 -0
  14. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.buttons.scss +77 -0
  15. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.calendars.scss +69 -0
  16. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.cards.scss +213 -0
  17. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.headings.scss +14 -0
  18. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.hints.scss +27 -0
  19. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.input-groups.scss +163 -0
  20. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.inputs.scss +135 -0
  21. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.links.scss +31 -0
  22. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.lists.scss +60 -0
  23. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.navs.scss +126 -0
  24. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.overlays.scss +33 -0
  25. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.pagination.scss +42 -0
  26. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.progress.scss +51 -0
  27. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.ranges.scss +114 -0
  28. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tables.scss +88 -0
  29. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tabs.scss +72 -0
  30. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.tags.scss +42 -0
  31. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.toggles.scss +74 -0
  32. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_components.tooltips.scss → components.tooltips.scss} +30 -28
  33. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.trees.scss +47 -0
  34. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/components.typography.scss +95 -0
  35. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/generics.global.scss +13 -0
  36. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.alerts.scss +6 -0
  37. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.badges.scss +8 -0
  38. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.buttons.scss +43 -82
  39. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.inputs.scss +40 -2
  40. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.links.scss +22 -0
  41. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.lists.scss +10 -0
  42. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.navs.scss +29 -0
  43. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.ranges.scss +89 -0
  44. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.tabs.scss +5 -0
  45. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.toggles.scss +6 -0
  46. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_components.typography.scss +25 -0
  47. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_objects.containers.scss +10 -0
  48. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_objects.grid.scss +10 -38
  49. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_settings.global.scss +864 -0
  50. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_tools.mediaqueries.scss +34 -13
  51. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_utilities.boxing.scss +125 -0
  52. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_utilities.visibility.scss +46 -6
  53. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.containers.scss +29 -0
  54. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.drawers.scss +88 -0
  55. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.forms.scss +25 -0
  56. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.grid.responsive.scss → objects.grid.responsive.scss} +14 -14
  57. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.grid.scss → objects.grid.scss} +2 -2
  58. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.images.scss → objects.images.scss} +1 -1
  59. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.media.scss → objects.media.scss} +3 -3
  60. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/objects.modals.scss +58 -0
  61. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_objects.panels.scss → objects.panels.scss} +11 -1
  62. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/themes/blaze.example.scss +7 -0
  63. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/{_utilities.alignment.scss → utilities.alignment.scss} +1 -1
  64. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.boxing.scss +101 -0
  65. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.elevation.scss +19 -0
  66. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.sizes.scss +25 -0
  67. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/utilities.visibility.scss +45 -0
  68. data/app/assets/stylesheets/activeadmin_blaze_theme/theme.scss +2 -2
  69. data/index.js +2 -0
  70. data/lib/activeadmin/views/activeadmin_form.rb +1 -1
  71. data/lib/activeadmin_blaze_theme/version.rb +1 -1
  72. data/lib/activeadmin_blaze_theme.rb +3 -3
  73. data/package.json +13 -0
  74. metadata +65 -367
  75. data/.circleci/config.yml +0 -33
  76. data/.gitignore +0 -13
  77. data/.rspec +0 -2
  78. data/.rubocop.yml +0 -27
  79. data/Gemfile +0 -5
  80. data/Rakefile +0 -16
  81. data/activeadmin_blaze_theme.gemspec +0 -35
  82. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.addresses.scss +0 -11
  83. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.alerts.scss +0 -78
  84. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.avatars.scss +0 -38
  85. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.back-to-top.scss +0 -17
  86. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.badges.scss +0 -71
  87. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.breadcrumbs.scss +0 -24
  88. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.buttons.scss +0 -91
  89. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.calendars.scss +0 -80
  90. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.cards.scss +0 -195
  91. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.divider.scss +0 -39
  92. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.file-upload.scss +0 -24
  93. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.github-buttons.scss +0 -131
  94. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.headings.scss +0 -12
  95. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.hints.scss +0 -21
  96. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.input-groups.scss +0 -164
  97. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.inputs.scss +0 -128
  98. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.links.scss +0 -72
  99. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.lists.scss +0 -64
  100. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.navs.scss +0 -83
  101. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.overlays.scss +0 -23
  102. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.pagination.scss +0 -31
  103. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.progress.scss +0 -83
  104. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.ranges.scss +0 -176
  105. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.tables.scss +0 -86
  106. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.tabs.scss +0 -68
  107. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.tags.scss +0 -39
  108. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.timelines.scss +0 -113
  109. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.toggles.scss +0 -89
  110. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_components.trees.scss +0 -48
  111. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_generics.global.scss +0 -17
  112. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_objects.containers.scss +0 -37
  113. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_objects.drawers.scss +0 -91
  114. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_objects.forms.scss +0 -25
  115. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_objects.modals.scss +0 -70
  116. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.boxing.scss +0 -111
  117. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.elevation.scss +0 -17
  118. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.radius.scss +0 -11
  119. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.sizes.scss +0 -23
  120. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.typography.scss +0 -160
  121. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_utilities.visibility.scss +0 -54
  122. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/_variables.scss +0 -93
  123. data/app/assets/stylesheets/activeadmin_blaze_theme/blaze/mixins/_utilities.states.scss +0 -7
  124. data/bin/rails +0 -29
  125. data/bin/rake +0 -29
  126. data/bin/rspec +0 -29
  127. data/bin/rubocop +0 -29
  128. data/extra/edit.png +0 -0
  129. data/extra/index.png +0 -0
  130. data/spec/dummy/.ruby-version +0 -1
  131. data/spec/dummy/.tool-versions +0 -1
  132. data/spec/dummy/Rakefile +0 -6
  133. data/spec/dummy/app/admin/authors.rb +0 -57
  134. data/spec/dummy/app/admin/dashboard.rb +0 -32
  135. data/spec/dummy/app/admin/posts.rb +0 -50
  136. data/spec/dummy/app/admin/tags.rb +0 -4
  137. data/spec/dummy/app/assets/config/manifest.js +0 -3
  138. data/spec/dummy/app/assets/images/.keep +0 -0
  139. data/spec/dummy/app/assets/javascripts/active_admin.js +0 -1
  140. data/spec/dummy/app/assets/stylesheets/active_admin.scss +0 -4
  141. data/spec/dummy/app/assets/stylesheets/application.css +0 -15
  142. data/spec/dummy/app/channels/application_cable/channel.rb +0 -4
  143. data/spec/dummy/app/channels/application_cable/connection.rb +0 -4
  144. data/spec/dummy/app/controllers/application_controller.rb +0 -2
  145. data/spec/dummy/app/controllers/concerns/.keep +0 -0
  146. data/spec/dummy/app/helpers/application_helper.rb +0 -2
  147. data/spec/dummy/app/javascript/packs/application.js +0 -15
  148. data/spec/dummy/app/jobs/application_job.rb +0 -7
  149. data/spec/dummy/app/mailers/application_mailer.rb +0 -4
  150. data/spec/dummy/app/models/application_record.rb +0 -7
  151. data/spec/dummy/app/models/author.rb +0 -26
  152. data/spec/dummy/app/models/concerns/.keep +0 -0
  153. data/spec/dummy/app/models/post.rb +0 -25
  154. data/spec/dummy/app/models/post_tag.rb +0 -9
  155. data/spec/dummy/app/models/profile.rb +0 -9
  156. data/spec/dummy/app/models/tag.rb +0 -6
  157. data/spec/dummy/app/views/layouts/application.html.erb +0 -14
  158. data/spec/dummy/app/views/layouts/mailer.html.erb +0 -13
  159. data/spec/dummy/app/views/layouts/mailer.text.erb +0 -1
  160. data/spec/dummy/bin/rails +0 -4
  161. data/spec/dummy/bin/rake +0 -4
  162. data/spec/dummy/bin/setup +0 -33
  163. data/spec/dummy/config/application.rb +0 -18
  164. data/spec/dummy/config/boot.rb +0 -5
  165. data/spec/dummy/config/cable.yml +0 -10
  166. data/spec/dummy/config/database.yml +0 -8
  167. data/spec/dummy/config/environment.rb +0 -5
  168. data/spec/dummy/config/environments/development.rb +0 -62
  169. data/spec/dummy/config/environments/production.rb +0 -112
  170. data/spec/dummy/config/environments/test.rb +0 -49
  171. data/spec/dummy/config/initializers/active_admin.rb +0 -335
  172. data/spec/dummy/config/initializers/application_controller_renderer.rb +0 -8
  173. data/spec/dummy/config/initializers/assets.rb +0 -12
  174. data/spec/dummy/config/initializers/backtrace_silencers.rb +0 -7
  175. data/spec/dummy/config/initializers/content_security_policy.rb +0 -28
  176. data/spec/dummy/config/initializers/cookies_serializer.rb +0 -5
  177. data/spec/dummy/config/initializers/filter_parameter_logging.rb +0 -4
  178. data/spec/dummy/config/initializers/inflections.rb +0 -16
  179. data/spec/dummy/config/initializers/mime_types.rb +0 -4
  180. data/spec/dummy/config/initializers/wrap_parameters.rb +0 -14
  181. data/spec/dummy/config/locales/en.yml +0 -33
  182. data/spec/dummy/config/puma.rb +0 -38
  183. data/spec/dummy/config/routes.rb +0 -3
  184. data/spec/dummy/config/spring.rb +0 -6
  185. data/spec/dummy/config/storage.yml +0 -7
  186. data/spec/dummy/config.ru +0 -5
  187. data/spec/dummy/db/migrate/20170806125915_create_active_storage_tables.active_storage.rb +0 -27
  188. data/spec/dummy/db/migrate/20180101010101_create_active_admin_comments.rb +0 -16
  189. data/spec/dummy/db/migrate/20180607053251_create_authors.rb +0 -13
  190. data/spec/dummy/db/migrate/20180607053254_create_profiles.rb +0 -12
  191. data/spec/dummy/db/migrate/20180607053255_create_tags.rb +0 -11
  192. data/spec/dummy/db/migrate/20180607053257_create_post_tags.rb +0 -12
  193. data/spec/dummy/db/migrate/20180607053739_create_posts.rb +0 -17
  194. data/spec/dummy/db/schema.rb +0 -99
  195. data/spec/dummy/lib/assets/.keep +0 -0
  196. data/spec/dummy/public/404.html +0 -67
  197. data/spec/dummy/public/422.html +0 -67
  198. data/spec/dummy/public/500.html +0 -66
  199. data/spec/dummy/public/apple-touch-icon-precomposed.png +0 -0
  200. data/spec/dummy/public/apple-touch-icon.png +0 -0
  201. data/spec/dummy/public/favicon.ico +0 -0
  202. data/spec/rails_helper.rb +0 -36
  203. data/spec/spec_helper.rb +0 -20
  204. data/spec/support/capybara.rb +0 -3
  205. data/spec/support/drivers.rb +0 -7
  206. data/spec/system/theme_spec.rb +0 -15
@@ -0,0 +1,74 @@
1
+ @import "mixins/components.toggles";
2
+
3
+ .c-toggle {
4
+ @include grid;
5
+ @include grid--center;
6
+ width: auto;
7
+ cursor: pointer;
8
+ user-select: none;
9
+
10
+ input:not(:checked) + .c-toggle__track {
11
+ background-color: $toggle-track-unchecked-background-color;
12
+
13
+ .c-toggle__handle {
14
+ transform: translateZ(0);
15
+ }
16
+ }
17
+
18
+ input:disabled + .c-toggle__track {
19
+ background-color: $toggle-track-disabled-background-color;
20
+ cursor: not-allowed;
21
+
22
+ .c-toggle__handle {
23
+ background-color: $toggle-handle-disabled-background-color;
24
+ cursor: not-allowed;
25
+ }
26
+ }
27
+ }
28
+
29
+ .c-toggle--brand .c-toggle__track {
30
+ @include toggle__track--background-color($toggle-track-brand-background-color);
31
+ }
32
+
33
+ .c-toggle--info .c-toggle__track {
34
+ @include toggle__track--background-color($toggle-track-info-background-color);
35
+ }
36
+
37
+ .c-toggle--warning .c-toggle__track {
38
+ @include toggle__track--background-color($toggle-track-warning-background-color);
39
+ }
40
+
41
+ .c-toggle--success .c-toggle__track {
42
+ @include toggle__track--background-color($toggle-track-success-background-color);
43
+ }
44
+
45
+ .c-toggle--error .c-toggle__track {
46
+ @include toggle__track--background-color($toggle-track-error-background-color);
47
+ }
48
+
49
+ .c-toggle input {
50
+ display: none;
51
+ }
52
+
53
+ .c-toggle__track {
54
+ @include grid__cell;
55
+ @include grid__cell--width-fixed;
56
+ @include toggle__track--background-color;
57
+ position: relative;
58
+ width: 1em;
59
+ height: .5em;
60
+ margin: $toggle-margin;
61
+ border-radius: $toggle-track-border-radius;
62
+ }
63
+
64
+ .c-toggle__handle {
65
+ position: absolute;
66
+ top: -.25em;
67
+ left: 0;
68
+ width: 1em;
69
+ height: 1em;
70
+ transform: translateX(100%);
71
+ border-radius: $toggle-handle-border-radius;
72
+ background-color: $toggle-handle-background-color;
73
+ box-shadow: $toggle-handle-box-shadow;
74
+ }
@@ -1,47 +1,49 @@
1
+ @import "mixins/settings.global";
2
+
1
3
  .c-tooltip {
2
4
  position: relative;
3
5
  overflow: visible;
4
6
 
5
- &::before,
6
- &::after {
7
- z-index: var(--z-over-page);
7
+ &:before,
8
+ &:after {
8
9
  visibility: hidden;
10
+ z-index: $z-over-page;
9
11
  }
10
12
 
11
- &::before {
13
+ &:before {
12
14
  position: absolute;
13
- border: 0.6em solid transparent;
14
- content: '';
15
+ border: $tooltip-arrow-width solid transparent;
16
+ content: "";
15
17
  }
16
18
 
17
- &::after {
19
+ &:after {
18
20
  position: absolute;
19
- padding: 0.25em 0.5em;
20
- color: #fff;
21
- line-height: 1.45;
21
+ padding: .25em .5em;
22
+ border: $tooltip-body-border-width $tooltip-body-border-style $tooltip-body-border-color;
23
+ border-radius: $border-radius;
24
+ background-color: $tooltip-body-background-color;
25
+ color: $tooltip-body-color;
26
+ line-height: $tooltip-line-height;
22
27
  white-space: nowrap;
23
- background-color: #000;
24
- border: 1px solid #000;
25
- border-radius: var(--border-radius);
26
- visibility: hidden;
27
28
  content: attr(aria-label);
29
+ visibility: hidden;
28
30
  }
29
31
 
30
- &:hover::before,
31
- &:hover::after {
32
+ &:hover:before,
33
+ &:hover:after {
32
34
  visibility: visible;
33
35
  }
34
36
  }
35
37
 
36
38
  .c-tooltip--top {
37
- &::before {
39
+ &:before {
38
40
  top: 0%;
39
41
  left: 50%;
40
- border-top-color: #000;
41
42
  transform: translate(-50%, -1em);
43
+ border-top-color: $tooltip-body-border-color;
42
44
  }
43
45
 
44
- &::after {
46
+ &:after {
45
47
  top: 0%;
46
48
  left: 50%;
47
49
  transform: translate(-50%, -3em);
@@ -49,14 +51,14 @@
49
51
  }
50
52
 
51
53
  .c-tooltip--right {
52
- &::before {
54
+ &:before {
53
55
  top: 50%;
54
56
  left: 100%;
55
- border-right-color: #000;
56
57
  transform: translate(0, -50%);
58
+ border-right-color: $tooltip-body-border-color;
57
59
  }
58
60
 
59
- &::after {
61
+ &:after {
60
62
  top: 50%;
61
63
  left: 100%;
62
64
  transform: translate(1em, -50%);
@@ -64,14 +66,14 @@
64
66
  }
65
67
 
66
68
  .c-tooltip--bottom {
67
- &::before {
69
+ &:before {
68
70
  bottom: 0;
69
71
  left: 50%;
70
- border-bottom-color: #000;
71
72
  transform: translate(-50%, 1em);
73
+ border-bottom-color: $tooltip-body-border-color;
72
74
  }
73
75
 
74
- &::after {
76
+ &:after {
75
77
  bottom: 0;
76
78
  left: 50%;
77
79
  transform: translate(-50%, 3em);
@@ -79,14 +81,14 @@
79
81
  }
80
82
 
81
83
  .c-tooltip--left {
82
- &::before {
84
+ &:before {
83
85
  top: 50%;
84
86
  right: 100%;
85
- border-left-color: #000;
86
87
  transform: translate(0, -50%);
88
+ border-left-color: $tooltip-body-border-color;
87
89
  }
88
90
 
89
- &::after {
91
+ &:after {
90
92
  top: 50%;
91
93
  right: 100%;
92
94
  transform: translate(-1em, -50%);
@@ -0,0 +1,47 @@
1
+ @import "mixins/settings.global";
2
+
3
+ .c-tree {
4
+ display: block;
5
+ margin: $tree-margin;
6
+ padding: $tree-padding;
7
+ list-style: none;
8
+
9
+ .c-tree {
10
+ padding: $tree-nested-padding;
11
+ }
12
+ }
13
+
14
+ .c-tree__item {
15
+ padding: $tree-item-padding;
16
+
17
+ &:before {
18
+ display: inline-block;
19
+ padding: $tree-item-indicator-padding;
20
+ transform-origin: 30% 50%;
21
+ color: $tree-item-indicator-color;
22
+ content: "–";
23
+ }
24
+ }
25
+
26
+ .c-tree__item--expandable {
27
+ &:before {
28
+ color: $tree-item-expandable-indicator-color;
29
+ content: "\276F";
30
+ }
31
+
32
+ .c-tree {
33
+ display: none;
34
+ }
35
+ }
36
+
37
+ .c-tree__item--expanded {
38
+ &:before {
39
+ transform: rotate(90deg);
40
+ color: $tree-item-expanded-indicator-color;
41
+ content: "\276F";
42
+ }
43
+
44
+ .c-tree {
45
+ display: block;
46
+ }
47
+ }
@@ -0,0 +1,95 @@
1
+ @import "mixins/components.typography";
2
+
3
+ .c-text {
4
+ color: $text-color;
5
+ font-family: $text-font-family;
6
+ font-weight: $text-font-weight;
7
+ line-height: $text-line-height;
8
+ }
9
+
10
+ .c-text--mono {
11
+ font-family: $text-font-family-mono;
12
+ }
13
+
14
+ .c-text--highlight {
15
+ @include text--highlight;
16
+ }
17
+
18
+ .c-text--quiet {
19
+ color: $color-quiet;
20
+ }
21
+
22
+ .c-text--loud {
23
+ font-weight: $text-font-weight-heavy;
24
+ }
25
+
26
+ .c-text--help[title] {
27
+ border-bottom: $help-border-bottom;
28
+ cursor: help;
29
+ }
30
+
31
+ .c-pre {
32
+ margin: 0;
33
+ }
34
+
35
+ .c-code {
36
+ @include code;
37
+ }
38
+
39
+ .c-code--multiline {
40
+ display: block;
41
+ padding: $spacing-small $spacing-medium;
42
+ border-radius: $border-radius;
43
+ white-space: pre;
44
+ word-wrap: normal;
45
+ overflow-x: auto;
46
+ }
47
+
48
+ .c-kbd {
49
+ @include code($keyboard-color, $keyboard-background-color);
50
+ border-bottom: $keyboard-border;
51
+ border-radius: $keyboard-border-radius;
52
+ }
53
+
54
+ .c-blockquote {
55
+ @include quotation--color;
56
+ display: block;
57
+ margin: $quotation-margin;
58
+ padding: $quotation-padding;
59
+ font-family: $quotation-font-family;
60
+ }
61
+
62
+ .c-blockquote--brand {
63
+ @include quotation--color($quotation-brand-border-color);
64
+ }
65
+
66
+ .c-blockquote--info {
67
+ @include quotation--color($quotation-info-border-color);
68
+ }
69
+
70
+ .c-blockquote--warning {
71
+ @include quotation--color($quotation-warning-border-color);
72
+ }
73
+
74
+ .c-blockquote--success {
75
+ @include quotation--color($quotation-success-border-color);
76
+ }
77
+
78
+ .c-blockquote--error {
79
+ @include quotation--color($quotation-error-border-color);
80
+ }
81
+
82
+ .c-blockquote__body {
83
+ @include paragraph;
84
+ font-size: $quotation-font-size;
85
+ }
86
+
87
+ .c-blockquote__footer {
88
+ @include paragraph;
89
+ color: $quotation-footer-color;
90
+ font-style: $quotation-footer-font-style;
91
+ }
92
+
93
+ .c-paragraph {
94
+ @include paragraph;
95
+ }
@@ -0,0 +1,13 @@
1
+ html {
2
+ box-sizing: border-box;
3
+ }
4
+
5
+ *,
6
+ *:before,
7
+ *:after {
8
+ box-sizing: inherit;
9
+ }
10
+
11
+ body {
12
+ margin: 0;
13
+ }
@@ -0,0 +1,6 @@
1
+ @import "settings.global";
2
+
3
+ @mixin alert-color($background-color: $alert-background-color, $color: $alert-color) {
4
+ background-color: $background-color;
5
+ color: $color;
6
+ }
@@ -0,0 +1,8 @@
1
+ @import "settings.global";
2
+
3
+ // Frames and wells
4
+ @mixin badge($background-color, $color: $badge-color, $border-color: $color) {
5
+ border: $badge-border-width $badge-border-style $border-color;
6
+ background-color: $background-color;
7
+ color: $color;
8
+ }
@@ -1,122 +1,83 @@
1
- @import 'utilities.states';
1
+ @import "settings.global";
2
2
 
3
- @mixin button-color {
4
- color: var(--button-color);
5
- background-color: var(--button-background-color);
6
- border: 1px solid transparent;
3
+ @mixin button-color($background-color: $button-background-color, $color: $button-color) {
4
+ border: $button-border;
5
+ background-color: $background-color;
6
+ color: $color;
7
7
 
8
8
  &.c-button--active {
9
- filter: brightness(0.95);
9
+ background-color: darken($background-color, $color-tint);
10
10
  }
11
11
 
12
- &:not(:disabled):not([disabled]) {
13
- &:not(:active) {
14
- &:hover {
15
- filter: brightness(0.95);
16
- }
12
+ &:not(:disabled) {
13
+ &:hover {
14
+ background-color: lighten($background-color, $color-tint);
17
15
  }
18
16
 
19
17
  &:focus {
20
- border-color: var(--border-color-focus);
21
- box-shadow: var(--box-shadow-focus);
18
+ border-color: $button-focus-border-color;
19
+ box-shadow: $button-focus-box-shadow;
22
20
  }
23
21
 
24
22
  &:active {
25
- filter: brightness(0.9);
23
+ background-color: darken($background-color, $color-tint);
26
24
  }
27
25
  }
28
26
  }
29
27
 
30
- @mixin button-ghost {
31
- --button-background-color: transparent;
32
-
33
- border: 1px solid var(--button-color);
28
+ @mixin button-ghost($color: $button-ghost-color, $color-hover: $button-ghost-hover-color) {
29
+ border: $button-ghost-border-width $button-ghost-border-style $color;
30
+ background-color: transparent;
31
+ color: $color;
34
32
 
35
33
  &.c-button--active {
36
- color: #fff;
37
- background-color: var(--button-color);
38
- border-color: 1px solid transparent;
34
+ border-color: darken($color, $color-tint);
35
+ background-color: darken($color, $color-tint);
36
+ color: $color-hover;
39
37
  }
40
38
 
41
- &:not(:disabled):not([disabled]) {
42
- &:not(:active) {
43
- &:hover {
44
- color: #fff;
45
- background-color: var(--button-color);
46
- border-color: 1px solid transparent;
47
- }
39
+ &:not(:disabled) {
40
+ &:hover {
41
+ background-color: $color;
42
+ color: $color-hover;
48
43
  }
49
44
 
50
45
  &:focus {
51
- border-color: var(--border-color-focus);
52
- box-shadow: var(--box-shadow-focus);
46
+ border-color: $button-focus-border-color;
47
+ box-shadow: $button-focus-box-shadow;
53
48
  }
54
49
 
55
- &:active,
56
- &[aria-current] {
57
- color: #fff;
58
- background-color: var(--button-color);
59
- border-color: 1px solid transparent;
50
+ &:active {
51
+ border-color: darken($color, $color-tint);
52
+ background-color: darken($color, $color-tint);
53
+ color: $color-hover;
60
54
  }
61
55
  }
62
56
  }
63
57
 
64
58
  @mixin button {
65
59
  @include button-color;
66
- @include disabled;
67
60
  display: inline-block;
68
61
  max-width: 100%;
69
- margin: 0;
70
- padding: var(--spacing-small);
71
- overflow: hidden;
72
- font-size: 1em;
73
- font-family: inherit;
74
- line-height: normal;
75
- white-space: nowrap;
76
- text-align: center;
62
+ margin: $button-margin;
63
+ padding: $button-padding;
64
+ border-radius: $button-border-radius;
65
+ outline: 0;
66
+ font-family: $button-font-family;
67
+ font-size: $button-font-size;
68
+ line-height: $button-line-height;
69
+ text-align: $button-text-align;
77
70
  text-decoration: none;
78
71
  text-overflow: ellipsis;
72
+ white-space: $button-white-space;
73
+ cursor: pointer;
74
+ overflow: hidden;
79
75
  vertical-align: middle;
80
- border-radius: var(--border-radius);
81
- outline: 0;
82
- -webkit-appearance: none;
83
76
  appearance: none;
84
77
  user-select: none;
85
- }
86
78
 
87
- @mixin button-nude {
88
- @include disabled;
89
- width: auto;
90
- margin: 0;
91
- padding: 0;
92
- overflow: visible;
93
- color: inherit;
94
- font: inherit;
95
- line-height: normal;
96
- text-align: inherit;
97
- text-decoration: inherit;
98
- vertical-align: inherit;
99
- background: inherit;
100
- border: 0;
101
- border-radius: 0;
102
- outline: 0;
103
- -webkit-appearance: none;
104
- appearance: none;
105
-
106
- &:not(:disabled):not([disabled]) {
107
- &:active {
108
- background-color: transparent;
109
- }
110
-
111
- &:not(:active) {
112
- &:focus {
113
- border-color: var(--border-color-focus);
114
- box-shadow: var(--box-shadow-focus);
115
- }
116
-
117
- &:hover {
118
- background-color: transparent;
119
- }
120
- }
79
+ &:disabled {
80
+ cursor: not-allowed;
81
+ opacity: $button-disabled-opacity;
121
82
  }
122
83
  }