primer_view_components 0.1.9 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (177) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +51 -0
  3. data/README.md +1 -1
  4. data/app/assets/javascripts/primer_view_components.js +1 -1
  5. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  6. data/app/assets/styles/primer_view_components.css +1 -3
  7. data/app/assets/styles/primer_view_components.css.map +1 -1
  8. data/app/components/primer/alpha/action_list/item.rb +2 -2
  9. data/app/components/primer/alpha/action_list.css +1 -1
  10. data/app/components/primer/alpha/action_list.css.json +16 -16
  11. data/app/components/primer/alpha/action_list.css.map +1 -1
  12. data/app/components/primer/alpha/action_list.pcss +145 -145
  13. data/app/components/primer/alpha/action_list.rb +30 -15
  14. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +2 -1
  15. data/app/components/primer/alpha/action_menu/action_menu_element.js +44 -34
  16. data/app/components/primer/alpha/action_menu/action_menu_element.ts +32 -30
  17. data/app/components/primer/alpha/action_menu/list.rb +6 -1
  18. data/app/components/primer/alpha/auto_complete.css +1 -1
  19. data/app/components/primer/alpha/auto_complete.css.map +1 -1
  20. data/app/components/primer/alpha/auto_complete.pcss +3 -3
  21. data/app/components/primer/alpha/banner.css +1 -1
  22. data/app/components/primer/alpha/banner.css.map +1 -1
  23. data/app/components/primer/alpha/banner.pcss +11 -11
  24. data/app/components/primer/alpha/button_marketing.css.map +1 -1
  25. data/app/components/primer/alpha/button_marketing.pcss +5 -12
  26. data/app/components/primer/alpha/button_marketing.rb +3 -0
  27. data/app/components/primer/alpha/dialog.css +1 -1
  28. data/app/components/primer/alpha/dialog.css.map +1 -1
  29. data/app/components/primer/alpha/dialog.pcss +36 -36
  30. data/app/components/primer/alpha/dropdown.css +1 -1
  31. data/app/components/primer/alpha/dropdown.css.map +1 -1
  32. data/app/components/primer/alpha/dropdown.pcss +12 -12
  33. data/app/components/primer/alpha/form_control.html.erb +1 -1
  34. data/app/components/primer/alpha/hellip_button.rb +3 -1
  35. data/app/components/primer/alpha/layout.css +1 -1
  36. data/app/components/primer/alpha/layout.css.map +1 -1
  37. data/app/components/primer/alpha/layout.pcss +4 -4
  38. data/app/components/primer/alpha/menu.css +1 -1
  39. data/app/components/primer/alpha/menu.css.map +1 -1
  40. data/app/components/primer/alpha/menu.pcss +21 -21
  41. data/app/components/primer/alpha/modal_dialog.js +11 -4
  42. data/app/components/primer/alpha/modal_dialog.ts +11 -4
  43. data/app/components/primer/alpha/nav_list/item.rb +2 -0
  44. data/app/components/primer/alpha/nav_list.js +6 -0
  45. data/app/components/primer/alpha/nav_list.rb +55 -36
  46. data/app/components/primer/alpha/nav_list.ts +8 -0
  47. data/app/components/primer/alpha/octicon_symbols.html.erb +1 -1
  48. data/app/components/primer/alpha/overlay.css +1 -1
  49. data/app/components/primer/alpha/overlay.css.json +1 -2
  50. data/app/components/primer/alpha/overlay.css.map +1 -1
  51. data/app/components/primer/alpha/overlay.pcss +14 -4
  52. data/app/components/primer/alpha/segmented_control.css +1 -1
  53. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  54. data/app/components/primer/alpha/segmented_control.pcss +24 -33
  55. data/app/components/primer/alpha/tab_nav.css +1 -1
  56. data/app/components/primer/alpha/tab_nav.css.map +1 -1
  57. data/app/components/primer/alpha/tab_nav.pcss +12 -12
  58. data/app/components/primer/alpha/text_field.css +1 -3
  59. data/app/components/primer/alpha/text_field.css.json +1 -0
  60. data/app/components/primer/alpha/text_field.css.map +1 -1
  61. data/app/components/primer/alpha/text_field.pcss +87 -83
  62. data/app/components/primer/alpha/toggle_switch.css +1 -1
  63. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  64. data/app/components/primer/alpha/toggle_switch.pcss +12 -12
  65. data/app/components/primer/alpha/underline_nav.css +1 -1
  66. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  67. data/app/components/primer/alpha/underline_nav.pcss +11 -11
  68. data/app/components/primer/beta/avatar.css +1 -1
  69. data/app/components/primer/beta/avatar.css.map +1 -1
  70. data/app/components/primer/beta/avatar.pcss +18 -18
  71. data/app/components/primer/beta/avatar_stack.css +1 -1
  72. data/app/components/primer/beta/avatar_stack.css.map +1 -1
  73. data/app/components/primer/beta/avatar_stack.pcss +5 -5
  74. data/app/components/primer/beta/base_button.rb +11 -0
  75. data/app/components/primer/beta/blankslate.css +1 -1
  76. data/app/components/primer/beta/blankslate.css.map +1 -1
  77. data/app/components/primer/beta/blankslate.pcss +16 -16
  78. data/app/components/primer/beta/border_box.css +1 -1
  79. data/app/components/primer/beta/border_box.css.json +1 -1
  80. data/app/components/primer/beta/border_box.css.map +1 -1
  81. data/app/components/primer/beta/border_box.pcss +40 -42
  82. data/app/components/primer/beta/button.css +1 -1
  83. data/app/components/primer/beta/button.css.json +4 -0
  84. data/app/components/primer/beta/button.css.map +1 -1
  85. data/app/components/primer/beta/button.pcss +39 -24
  86. data/app/components/primer/beta/button.rb +3 -0
  87. data/app/components/primer/beta/button_group.css +1 -0
  88. data/app/components/primer/beta/button_group.css.json +14 -0
  89. data/app/components/primer/beta/button_group.css.map +1 -0
  90. data/app/components/primer/beta/button_group.pcss +27 -0
  91. data/app/components/primer/beta/button_group.rb +19 -19
  92. data/app/components/primer/beta/close_button.rb +3 -1
  93. data/app/components/primer/beta/counter.css +1 -1
  94. data/app/components/primer/beta/counter.css.map +1 -1
  95. data/app/components/primer/beta/counter.pcss +5 -5
  96. data/app/components/primer/beta/details.html.erb +6 -2
  97. data/app/components/primer/beta/details.rb +18 -10
  98. data/app/components/primer/beta/flash.css +1 -1
  99. data/app/components/primer/beta/flash.css.map +1 -1
  100. data/app/components/primer/beta/flash.pcss +12 -12
  101. data/app/components/primer/beta/icon_button.rb +7 -3
  102. data/app/components/primer/beta/label.css +1 -1
  103. data/app/components/primer/beta/label.css.map +1 -1
  104. data/app/components/primer/beta/label.pcss +3 -3
  105. data/app/components/primer/beta/popover.css +1 -1
  106. data/app/components/primer/beta/popover.css.map +1 -1
  107. data/app/components/primer/beta/popover.pcss +4 -4
  108. data/app/components/primer/beta/state.css +1 -1
  109. data/app/components/primer/beta/state.css.map +1 -1
  110. data/app/components/primer/beta/state.pcss +7 -7
  111. data/app/components/primer/beta/subhead.css +1 -1
  112. data/app/components/primer/beta/subhead.css.map +1 -1
  113. data/app/components/primer/beta/subhead.pcss +9 -9
  114. data/app/components/primer/beta/timeline_item.css +1 -1
  115. data/app/components/primer/beta/timeline_item.css.map +1 -1
  116. data/app/components/primer/beta/timeline_item.pcss +18 -18
  117. data/app/components/primer/beta/truncate.css +1 -1
  118. data/app/components/primer/beta/truncate.css.map +1 -1
  119. data/app/components/primer/beta/truncate.pcss +1 -1
  120. data/app/components/primer/focus_group.js +1 -10
  121. data/app/components/primer/focus_group.ts +1 -10
  122. data/app/components/primer/primer.d.ts +1 -0
  123. data/app/components/primer/primer.js +1 -0
  124. data/app/components/primer/primer.pcss +1 -0
  125. data/app/components/primer/primer.ts +1 -0
  126. data/lib/postcss_mixins/activeIndicatorLine.pcss +4 -4
  127. data/lib/primer/accessibility.rb +74 -0
  128. data/lib/primer/forms/form_control.html.erb +1 -1
  129. data/lib/primer/static/generate_previews.rb +15 -8
  130. data/lib/primer/view_components/linters/deprecated_components_counter.rb +37 -13
  131. data/lib/primer/view_components/version.rb +2 -2
  132. data/lib/primer/yard/lookbook_pages_backend.rb +3 -3
  133. data/previews/pages/forms/03_caption_templates.md.erb +1 -1
  134. data/previews/pages/forms/04_after_content.md.erb +1 -1
  135. data/previews/pages/forms/06_miscellaneous_inputs.md.erb +1 -1
  136. data/previews/pages/forms/07_toggle_switch_forms.md.erb +1 -1
  137. data/previews/primer/alpha/action_menu_preview/two_menus.html.erb +13 -0
  138. data/previews/primer/alpha/action_menu_preview/with_actions.html.erb +21 -0
  139. data/previews/primer/alpha/action_menu_preview.rb +5 -13
  140. data/previews/primer/alpha/button_marketing_preview.rb +3 -2
  141. data/previews/primer/alpha/dialog_preview.rb +4 -3
  142. data/previews/primer/alpha/hellip_button_preview.rb +3 -2
  143. data/previews/primer/alpha/nav_list_preview.rb +1 -1
  144. data/previews/primer/beta/base_button_preview.rb +9 -2
  145. data/previews/primer/beta/button_group_preview/action_menus.html.erb +8 -0
  146. data/previews/primer/beta/button_group_preview.rb +49 -11
  147. data/previews/primer/beta/button_preview/trailing_counter.html.erb +1 -1
  148. data/previews/primer/beta/button_preview.rb +5 -2
  149. data/previews/primer/beta/close_button_preview.rb +3 -2
  150. data/previews/primer/beta/details_preview.rb +11 -8
  151. data/previews/primer/forms_preview.rb +44 -0
  152. data/static/arguments.json +4 -4
  153. data/static/classes.json +378 -372
  154. data/static/constants.json +0 -1
  155. data/static/info_arch.json +5150 -1368
  156. data/static/previews.json +5197 -1433
  157. metadata +37 -29
  158. data/previews/primer/forms/forms_preview.rb +0 -48
  159. /data/previews/primer/{forms/forms_preview → forms_preview}/after_content_form.html.erb +0 -0
  160. /data/previews/primer/{forms/forms_preview → forms_preview}/array_check_box_group_form.html.erb +0 -0
  161. /data/previews/primer/{forms/forms_preview → forms_preview}/caption_template_form.html.erb +0 -0
  162. /data/previews/primer/{forms/forms_preview → forms_preview}/check_box_group_form.html.erb +0 -0
  163. /data/previews/primer/{forms/forms_preview → forms_preview}/check_box_with_nested_form.html.erb +0 -0
  164. /data/previews/primer/{forms/forms_preview → forms_preview}/composed_form.html.erb +0 -0
  165. /data/previews/primer/{forms/forms_preview → forms_preview}/example_toggle_switch_form.html.erb +0 -0
  166. /data/previews/primer/{forms/forms_preview → forms_preview}/horizontal_form.html.erb +0 -0
  167. /data/previews/primer/{forms/forms_preview → forms_preview}/immediate_validation_form.html.erb +0 -0
  168. /data/previews/primer/{forms/forms_preview → forms_preview}/invalid_form.html.erb +0 -0
  169. /data/previews/primer/{forms/forms_preview → forms_preview}/multi_input_form.html.erb +0 -0
  170. /data/previews/primer/{forms/forms_preview → forms_preview}/multi_text_field_form.html.erb +0 -0
  171. /data/previews/primer/{forms/forms_preview → forms_preview}/name_with_question_mark_form.html.erb +0 -0
  172. /data/previews/primer/{forms/forms_preview → forms_preview}/radio_button_group_form.html.erb +0 -0
  173. /data/previews/primer/{forms/forms_preview → forms_preview}/radio_button_with_nested_form.html.erb +0 -0
  174. /data/previews/primer/{forms/forms_preview → forms_preview}/select_form.html.erb +0 -0
  175. /data/previews/primer/{forms/forms_preview → forms_preview}/single_text_field_form.html.erb +0 -0
  176. /data/previews/primer/{forms/forms_preview → forms_preview}/submit_button_form.html.erb +0 -0
  177. /data/previews/primer/{forms/forms_preview → forms_preview}/text_field_and_checkbox_form.html.erb +0 -0
@@ -2,7 +2,7 @@
2
2
 
3
3
  .UnderlineNav {
4
4
  display: flex;
5
- min-height: var(--base-size-48, 48px);
5
+ min-height: var(--base-size-48);
6
6
  overflow-x: auto;
7
7
  overflow-y: hidden;
8
8
  box-shadow: inset 0 -1px 0 var(--color-border-muted);
@@ -10,7 +10,7 @@
10
10
  justify-content: space-between;
11
11
 
12
12
  & .Counter {
13
- margin-left: var(--control-medium-gap, 8px);
13
+ margin-left: var(--control-medium-gap);
14
14
  color: var(--color-fg-default);
15
15
  background-color: var(--color-neutral-muted);
16
16
  }
@@ -24,15 +24,15 @@
24
24
  .UnderlineNav-body {
25
25
  display: flex;
26
26
  align-items: center;
27
- gap: var(--control-medium-gap, 8px);
27
+ gap: var(--control-medium-gap);
28
28
  list-style: none;
29
29
  }
30
30
 
31
31
  .UnderlineNav-item {
32
32
  position: relative;
33
33
  display: flex;
34
- padding: 0 var(--control-medium-paddingInline-condensed, 8px);
35
- font-size: var(--text-body-size-medium, 14px);
34
+ padding: 0 var(--control-medium-paddingInline-condensed);
35
+ font-size: var(--text-body-size-medium);
36
36
  line-height: 30px;
37
37
  color: var(--color-fg-default);
38
38
  text-align: center;
@@ -40,7 +40,7 @@
40
40
  cursor: pointer;
41
41
  background-color: transparent;
42
42
  border: 0;
43
- border-radius: var(--borderRadius-medium, 6px);
43
+ border-radius: var(--borderRadius-medium);
44
44
  align-items: center;
45
45
 
46
46
  &:hover,
@@ -57,7 +57,7 @@
57
57
  & [data-content]::before {
58
58
  display: block;
59
59
  height: 0;
60
- font-weight: var(--base-text-weight-semibold, 600);
60
+ font-weight: var(--base-text-weight-semibold);
61
61
  visibility: hidden;
62
62
  content: attr(data-content);
63
63
  }
@@ -80,7 +80,7 @@
80
80
  &.selected,
81
81
  &[role='tab'][aria-selected='true'],
82
82
  &[aria-current]:not([aria-current='false']) {
83
- font-weight: var(--base-text-weight-semibold, 600);
83
+ font-weight: var(--base-text-weight-semibold);
84
84
  color: var(--color-fg-default);
85
85
  border-bottom-color: var(--color-primer-border-active);
86
86
 
@@ -94,7 +94,7 @@
94
94
  height: 2px;
95
95
  content: '';
96
96
  background: var(--color-primer-border-active);
97
- border-radius: var(--borderRadius-medium, 6px);
97
+ border-radius: var(--borderRadius-medium);
98
98
  transform: translate(50%, -50%);
99
99
  }
100
100
  }
@@ -117,13 +117,13 @@
117
117
 
118
118
  /* required for underline to align with additional wrapper element */
119
119
  & .UnderlineNav-body {
120
- min-height: var(--base-size-48, 48px);
120
+ min-height: var(--base-size-48);
121
121
  }
122
122
  }
123
123
 
124
124
  .UnderlineNav-octicon {
125
125
  display: inline !important;
126
- margin-right: var(--control-medium-gap, 8px);
126
+ margin-right: var(--control-medium-gap);
127
127
  color: var(--color-fg-muted);
128
128
  fill: var(--color-fg-muted);
129
129
  }
@@ -1 +1 @@
1
- .avatar{background-color:var(--color-avatar-bg);border-radius:var(--borderRadius-medium,6px);box-shadow:0 0 0 1px var(--color-avatar-border);display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small,4px)}.avatar-1{height:var(--base-size-16,16px);width:var(--base-size-16,16px)}.avatar-2{height:var(--base-size-20,20px);width:var(--base-size-20,20px)}.avatar-3{height:var(--base-size-24,24px);width:var(--base-size-24,24px)}.avatar-4{height:var(--base-size-28,28px);width:var(--base-size-28,28px)}.avatar-5{height:var(--base-size-32,32px);width:var(--base-size-32,32px)}.avatar-6{height:var(--base-size-40,40px);width:var(--base-size-40,40px)}.avatar-7{height:var(--base-size-48,48px);width:var(--base-size-48,48px)}.avatar-8{height:var(--base-size-64,64px);width:var(--base-size-64,64px)}
1
+ .avatar{background-color:var(--color-avatar-bg);border-radius:var(--borderRadius-medium,6px);box-shadow:0 0 0 1px var(--color-avatar-border);display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small,3px)}.avatar-1{height:var(--base-size-16,1rem);width:var(--base-size-16,1rem)}.avatar-2{height:var(--base-size-20,1.25rem);width:var(--base-size-20,1.25rem)}.avatar-3{height:var(--base-size-24,1.5rem);width:var(--base-size-24,1.5rem)}.avatar-4{height:var(--base-size-28,1.75rem);width:var(--base-size-28,1.75rem)}.avatar-5{height:var(--base-size-32,2rem);width:var(--base-size-32,2rem)}.avatar-6{height:var(--base-size-40,2.5rem);width:var(--base-size-40,2.5rem)}.avatar-7{height:var(--base-size-48,3rem);width:var(--base-size-48,3rem)}.avatar-8{height:var(--base-size-64,4rem);width:var(--base-size-64,4rem)}
@@ -1 +1 @@
1
- {"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,uCAAwC,CACxC,4CAA8C,CAE9C,+CAAgD,CAPhD,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,2CACF,CAIA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF,CAEA,UAEE,+BAAiC,CADjC,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n display: inline-block;\n overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n line-height: 1;\n vertical-align: middle;\n background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */\n border-radius: var(--borderRadius-medium, 6px);\n flex-shrink: 0;\n box-shadow: 0 0 0 1px var(--color-avatar-border);\n}\n\n.avatar-link {\n float: left;\n line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n display: inline-block;\n margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n border-radius: var(--borderRadius-small, 4px);\n}\n\n/* Sizes */\n\n.avatar-1 {\n width: var(--base-size-16, 16px);\n height: var(--base-size-16, 16px);\n}\n\n.avatar-2 {\n width: var(--base-size-20, 20px);\n height: var(--base-size-20, 20px);\n}\n\n.avatar-3 {\n width: var(--base-size-24, 24px);\n height: var(--base-size-24, 24px);\n}\n\n.avatar-4 {\n width: var(--base-size-28, 28px);\n height: var(--base-size-28, 28px);\n}\n\n.avatar-5 {\n width: var(--base-size-32, 32px);\n height: var(--base-size-32, 32px);\n}\n\n.avatar-6 {\n width: var(--base-size-40, 40px);\n height: var(--base-size-40, 40px);\n}\n\n.avatar-7 {\n width: var(--base-size-48, 48px);\n height: var(--base-size-48, 48px);\n}\n\n.avatar-8 {\n width: var(--base-size-64, 64px);\n height: var(--base-size-64, 64px);\n}\n"]}
1
+ {"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,uCAAwC,CACxC,4CAAyC,CAEzC,+CAAgD,CAPhD,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,2CACF,CAIA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n display: inline-block;\n overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n line-height: 1;\n vertical-align: middle;\n background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */\n border-radius: var(--borderRadius-medium);\n flex-shrink: 0;\n box-shadow: 0 0 0 1px var(--color-avatar-border);\n}\n\n.avatar-link {\n float: left;\n line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n display: inline-block;\n margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n border-radius: var(--borderRadius-small);\n}\n\n/* Sizes */\n\n.avatar-1 {\n width: var(--base-size-16);\n height: var(--base-size-16);\n}\n\n.avatar-2 {\n width: var(--base-size-20);\n height: var(--base-size-20);\n}\n\n.avatar-3 {\n width: var(--base-size-24);\n height: var(--base-size-24);\n}\n\n.avatar-4 {\n width: var(--base-size-28);\n height: var(--base-size-28);\n}\n\n.avatar-5 {\n width: var(--base-size-32);\n height: var(--base-size-32);\n}\n\n.avatar-6 {\n width: var(--base-size-40);\n height: var(--base-size-40);\n}\n\n.avatar-7 {\n width: var(--base-size-48);\n height: var(--base-size-48);\n}\n\n.avatar-8 {\n width: var(--base-size-64);\n height: var(--base-size-64);\n}\n"]}
@@ -6,7 +6,7 @@
6
6
  line-height: 1;
7
7
  vertical-align: middle;
8
8
  background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */
9
- border-radius: var(--borderRadius-medium, 6px);
9
+ border-radius: var(--borderRadius-medium);
10
10
  flex-shrink: 0;
11
11
  box-shadow: 0 0 0 1px var(--color-avatar-border);
12
12
  }
@@ -27,47 +27,47 @@
27
27
  .avatar-1,
28
28
  .avatar-2,
29
29
  .avatar-small {
30
- border-radius: var(--borderRadius-small, 4px);
30
+ border-radius: var(--borderRadius-small);
31
31
  }
32
32
 
33
33
  /* Sizes */
34
34
 
35
35
  .avatar-1 {
36
- width: var(--base-size-16, 16px);
37
- height: var(--base-size-16, 16px);
36
+ width: var(--base-size-16);
37
+ height: var(--base-size-16);
38
38
  }
39
39
 
40
40
  .avatar-2 {
41
- width: var(--base-size-20, 20px);
42
- height: var(--base-size-20, 20px);
41
+ width: var(--base-size-20);
42
+ height: var(--base-size-20);
43
43
  }
44
44
 
45
45
  .avatar-3 {
46
- width: var(--base-size-24, 24px);
47
- height: var(--base-size-24, 24px);
46
+ width: var(--base-size-24);
47
+ height: var(--base-size-24);
48
48
  }
49
49
 
50
50
  .avatar-4 {
51
- width: var(--base-size-28, 28px);
52
- height: var(--base-size-28, 28px);
51
+ width: var(--base-size-28);
52
+ height: var(--base-size-28);
53
53
  }
54
54
 
55
55
  .avatar-5 {
56
- width: var(--base-size-32, 32px);
57
- height: var(--base-size-32, 32px);
56
+ width: var(--base-size-32);
57
+ height: var(--base-size-32);
58
58
  }
59
59
 
60
60
  .avatar-6 {
61
- width: var(--base-size-40, 40px);
62
- height: var(--base-size-40, 40px);
61
+ width: var(--base-size-40);
62
+ height: var(--base-size-40);
63
63
  }
64
64
 
65
65
  .avatar-7 {
66
- width: var(--base-size-48, 48px);
67
- height: var(--base-size-48, 48px);
66
+ width: var(--base-size-48);
67
+ height: var(--base-size-48);
68
68
  }
69
69
 
70
70
  .avatar-8 {
71
- width: var(--base-size-64, 64px);
72
- height: var(--base-size-64, 64px);
71
+ width: var(--base-size-64);
72
+ height: var(--base-size-64);
73
73
  }
@@ -1 +1 @@
1
- .AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--color-canvas-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--color-canvas-default);border-radius:var(--borderRadius-small,4px);border-right:var(--borderWidth-thin,1px) solid var(--color-canvas-default);box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--borderRadius-small,4px)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--color-canvas-subtle);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin,1px) solid var(--color-canvas-default);position:absolute}.avatar.avatar-more:before{background:var(--color-avatar-stack-fade-more);width:17px}.avatar.avatar-more:after{background:var(--color-avatar-stack-fade);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--color-avatar-stack-fade)}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--color-canvas-subtle);width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin,1px) solid var(--color-canvas-default);border-right:0;margin-left:-11px;margin-right:0}
1
+ .AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--color-canvas-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--color-canvas-default);border-radius:var(--borderRadius-small,3px);border-right:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-canvas-default);box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--borderRadius-small,3px)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--color-canvas-subtle);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-canvas-default);position:absolute}.avatar.avatar-more:before{background:var(--color-avatar-stack-fade-more);width:17px}.avatar.avatar-more:after{background:var(--color-avatar-stack-fade);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--color-avatar-stack-fade)}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--color-canvas-subtle);width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-canvas-default);border-right:0;margin-left:-11px;margin-right:0}
@@ -1 +1 @@
1
- {"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,sCAAuC,CACvC,mBAAoB,CAFpB,YAoDF,CAhDE,0BAQE,4CAA6C,CAE7C,2CAA6C,CAD7C,0EAA4E,CAE5E,eAAgB,CALhB,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAEZ,kBAAmB,CANnB,iBAAkB,CAWlB,iCAAmC,CARnC,UAAW,CAFX,SA8BF,CAlBE,sCACE,SACF,CAEA,qCAEE,cAAe,CADf,SAEF,CAEA,8BACE,2CACF,CAGA,yCACE,YAAa,CACb,SACF,CAIA,gCACE,gBACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,qCAAsC,CADtC,cAAe,CADf,SAuBF,CAnBE,qDAME,iBAAkB,CADlB,UAAW,CAFX,aAAc,CACd,WAAY,CAGZ,qEAAuE,CALvE,iBAMF,CAEA,2BAEE,8CAA+C,CAD/C,UAEF,CAEA,0BAEE,yCAA0C,CAD1C,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,oDAEE,eAAgB,CADhB,cAEF,CAEA,+DACE,aACF,CAGF,wCACE,yCAUF,CARE,+CACE,SACF,CAEA,8CAEE,qCAAsC,CADtC,SAEF,CAGF,4BAIE,yEAA2E,CAD3E,cAAe,CADf,iBAAkB,CADlB,cAIF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n position: relative;\n min-width: 26px;\n height: 20px;\n\n & .AvatarStack-body {\n position: absolute;\n }\n\n &.AvatarStack--two {\n min-width: 36px;\n }\n\n &.AvatarStack--three-plus {\n min-width: 46px;\n }\n}\n\n.AvatarStack-body {\n display: flex;\n background: var(--color-canvas-default);\n border-radius: 100px;\n\n & .avatar {\n position: relative;\n z-index: 2;\n display: flex;\n width: 20px;\n height: 20px;\n box-sizing: content-box;\n margin-right: -11px;\n background-color: var(--color-canvas-default);\n border-right: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);\n border-radius: var(--borderRadius-small, 4px);\n box-shadow: none;\n transition: margin 0.1s ease-in-out;\n\n &:first-child {\n z-index: 3;\n }\n\n &:last-child {\n z-index: 1;\n border-right: 0;\n }\n\n & img {\n border-radius: var(--borderRadius-small, 4px);\n }\n\n /* Account for 4+ avatars */\n &:nth-child(n + 4) {\n display: none;\n opacity: 0;\n }\n }\n\n &:hover {\n & .avatar {\n margin-right: 3px;\n }\n\n & .avatar:nth-child(n + 4) {\n display: flex;\n opacity: 1;\n }\n\n & .avatar-more {\n display: none !important;\n }\n }\n}\n\n.avatar.avatar-more {\n z-index: 1;\n margin-right: 0;\n background: var(--color-canvas-subtle);\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n height: 20px;\n content: '';\n border-radius: 2px;\n outline: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);\n }\n\n &::before {\n width: 17px;\n background: var(--color-avatar-stack-fade-more);\n }\n\n &::after {\n width: 14px;\n background: var(--color-avatar-stack-fade);\n }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n & .AvatarStack-body {\n right: 0;\n flex-direction: row-reverse;\n\n &:hover .avatar {\n margin-right: 0;\n margin-left: 3px;\n }\n\n & .avatar:not(:last-child) {\n border-left: 0;\n }\n }\n\n & .avatar.avatar-more {\n background: var(--color-avatar-stack-fade);\n\n &::before {\n width: 5px;\n }\n\n &::after {\n width: 2px;\n background: var(--color-canvas-subtle);\n }\n }\n\n & .avatar {\n margin-right: 0;\n margin-left: -11px;\n border-right: 0;\n border-left: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);\n }\n}\n"]}
1
+ {"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,sCAAuC,CACvC,mBAAoB,CAFpB,YAoDF,CAhDE,0BAQE,4CAA6C,CAE7C,2CAAwC,CADxC,wFAAuE,CAEvE,eAAgB,CALhB,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAEZ,kBAAmB,CANnB,iBAAkB,CAWlB,iCAAmC,CARnC,UAAW,CAFX,SA8BF,CAlBE,sCACE,SACF,CAEA,qCAEE,cAAe,CADf,SAEF,CAEA,8BACE,2CACF,CAGA,yCACE,YAAa,CACb,SACF,CAIA,gCACE,gBACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,qCAAsC,CADtC,cAAe,CADf,SAuBF,CAnBE,qDAME,iBAAkB,CADlB,UAAW,CAFX,aAAc,CACd,WAAY,CAGZ,mFAAkE,CALlE,iBAMF,CAEA,2BAEE,8CAA+C,CAD/C,UAEF,CAEA,0BAEE,yCAA0C,CAD1C,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,oDAEE,eAAgB,CADhB,cAEF,CAEA,+DACE,aACF,CAGF,wCACE,yCAUF,CARE,+CACE,SACF,CAEA,8CAEE,qCAAsC,CADtC,SAEF,CAGF,4BAIE,uFAAsE,CADtE,cAAe,CADf,iBAAkB,CADlB,cAIF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n position: relative;\n min-width: 26px;\n height: 20px;\n\n & .AvatarStack-body {\n position: absolute;\n }\n\n &.AvatarStack--two {\n min-width: 36px;\n }\n\n &.AvatarStack--three-plus {\n min-width: 46px;\n }\n}\n\n.AvatarStack-body {\n display: flex;\n background: var(--color-canvas-default);\n border-radius: 100px;\n\n & .avatar {\n position: relative;\n z-index: 2;\n display: flex;\n width: 20px;\n height: 20px;\n box-sizing: content-box;\n margin-right: -11px;\n background-color: var(--color-canvas-default);\n border-right: var(--borderWidth-thin) solid var(--color-canvas-default);\n border-radius: var(--borderRadius-small);\n box-shadow: none;\n transition: margin 0.1s ease-in-out;\n\n &:first-child {\n z-index: 3;\n }\n\n &:last-child {\n z-index: 1;\n border-right: 0;\n }\n\n & img {\n border-radius: var(--borderRadius-small);\n }\n\n /* Account for 4+ avatars */\n &:nth-child(n + 4) {\n display: none;\n opacity: 0;\n }\n }\n\n &:hover {\n & .avatar {\n margin-right: 3px;\n }\n\n & .avatar:nth-child(n + 4) {\n display: flex;\n opacity: 1;\n }\n\n & .avatar-more {\n display: none !important;\n }\n }\n}\n\n.avatar.avatar-more {\n z-index: 1;\n margin-right: 0;\n background: var(--color-canvas-subtle);\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n height: 20px;\n content: '';\n border-radius: 2px;\n outline: var(--borderWidth-thin) solid var(--color-canvas-default);\n }\n\n &::before {\n width: 17px;\n background: var(--color-avatar-stack-fade-more);\n }\n\n &::after {\n width: 14px;\n background: var(--color-avatar-stack-fade);\n }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n & .AvatarStack-body {\n right: 0;\n flex-direction: row-reverse;\n\n &:hover .avatar {\n margin-right: 0;\n margin-left: 3px;\n }\n\n & .avatar:not(:last-child) {\n border-left: 0;\n }\n }\n\n & .avatar.avatar-more {\n background: var(--color-avatar-stack-fade);\n\n &::before {\n width: 5px;\n }\n\n &::after {\n width: 2px;\n background: var(--color-canvas-subtle);\n }\n }\n\n & .avatar {\n margin-right: 0;\n margin-left: -11px;\n border-right: 0;\n border-left: var(--borderWidth-thin) solid var(--color-canvas-default);\n }\n}\n"]}
@@ -35,8 +35,8 @@
35
35
  box-sizing: content-box;
36
36
  margin-right: -11px;
37
37
  background-color: var(--color-canvas-default);
38
- border-right: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
39
- border-radius: var(--borderRadius-small, 4px);
38
+ border-right: var(--borderWidth-thin) solid var(--color-canvas-default);
39
+ border-radius: var(--borderRadius-small);
40
40
  box-shadow: none;
41
41
  transition: margin 0.1s ease-in-out;
42
42
 
@@ -50,7 +50,7 @@
50
50
  }
51
51
 
52
52
  & img {
53
- border-radius: var(--borderRadius-small, 4px);
53
+ border-radius: var(--borderRadius-small);
54
54
  }
55
55
 
56
56
  /* Account for 4+ avatars */
@@ -88,7 +88,7 @@
88
88
  height: 20px;
89
89
  content: '';
90
90
  border-radius: 2px;
91
- outline: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
91
+ outline: var(--borderWidth-thin) solid var(--color-canvas-default);
92
92
  }
93
93
 
94
94
  &::before {
@@ -136,6 +136,6 @@
136
136
  margin-right: 0;
137
137
  margin-left: -11px;
138
138
  border-right: 0;
139
- border-left: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
139
+ border-left: var(--borderWidth-thin) solid var(--color-canvas-default);
140
140
  }
141
141
  }
@@ -12,6 +12,9 @@ module Primer
12
12
  DEFAULT_TYPE = :button
13
13
  TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
14
14
 
15
+ attr_reader :disabled
16
+ alias disabled? disabled
17
+
15
18
  # @example Block
16
19
  # <%= render(Primer::Beta::BaseButton.new(block: :true)) { "Block" } %>
17
20
  # <%= render(Primer::Beta::BaseButton.new(block: :true, scheme: :primary)) { "Primary block" } %>
@@ -19,11 +22,13 @@ module Primer
19
22
  # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
20
23
  # @param type [Symbol] <%= one_of(Primer::Beta::BaseButton::TYPE_OPTIONS) %>
21
24
  # @param block [Boolean] Whether button is full-width with `display: block`.
25
+ # @param disabled [Boolean] Whether or not the button is disabled. If true, this option forces `tag:` to `:button`.
22
26
  # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
23
27
  def initialize(
24
28
  tag: DEFAULT_TAG,
25
29
  type: DEFAULT_TYPE,
26
30
  block: false,
31
+ disabled: false,
27
32
  **system_arguments
28
33
  )
29
34
  @system_arguments = system_arguments
@@ -35,6 +40,12 @@ module Primer
35
40
  system_arguments[:classes],
36
41
  "btn-block" => block
37
42
  )
43
+
44
+ @disabled = disabled
45
+ return unless @disabled
46
+
47
+ @system_arguments[:tag] = :button
48
+ @system_arguments[:disabled] = ""
38
49
  end
39
50
 
40
51
  def call
@@ -1 +1 @@
1
- .blankslate{padding:var(--base-size-32,32px);position:relative;text-align:center}.blankslate p{color:var(--color-fg-muted)}.blankslate code{background:var(--color-canvas-default);border:var(--borderWidth-thin,1px) solid var(--color-border-muted);border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,14px);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--color-fg-muted);margin-bottom:var(--stack-gap-condensed,8px);margin-left:var(--control-small-gap,4px);margin-right:var(--control-small-gap,4px)}.blankslate-image{margin-bottom:var(--stack-gap-normal,16px)}.blankslate-heading{margin-bottom:var(--base-size-4,4px)}.blankslate-action{margin-top:var(--stack-gap-normal,16px)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,24px)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,8px)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px)}.blankslate-spacious{padding:var(--base-size-80,80px) var(--base-size-40,40px)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,16px) 0}.blankslate-large p{font-size:var(--text-body-size-large,16px)}.blankslate-clean-background{border:0}
1
+ .blankslate{padding:var(--base-size-32,2rem);position:relative;text-align:center}.blankslate p{color:var(--color-fg-muted)}.blankslate code{background:var(--color-canvas-default);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-muted);border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--color-fg-muted);margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px)}.blankslate-spacious{padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}
@@ -1 +1 @@
1
- {"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,YAEE,gCAAkC,CADlC,iBAAkB,CAElB,iBAkBF,CAhBE,cACE,2BACF,CAEA,iBAGE,sCAAuC,CACvC,kEAAoE,CACpE,4CAA8C,CAH9C,2CAA6C,CAD7C,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,2BAA4B,CAF5B,4CAA8C,CAC9C,wCAA0C,CAF1C,yCAIF,CAEA,kBACE,0CACF,CAEA,oBACE,oCACF,CAEA,mBACE,uCASF,CAPE,iCACE,yCACF,CAEA,gCACE,4CACF,CAGF,mBACE,+EACF,CAEA,qBACE,yDACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,qCAIF,CAEA,oBACE,0CACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n position: relative;\n padding: var(--base-size-32, 32px);\n text-align: center;\n\n & p {\n color: var(--color-fg-muted);\n }\n\n & code {\n padding: 2px 5px 3px;\n font-size: var(--text-body-size-medium, 14px);\n background: var(--color-canvas-default);\n border: var(--borderWidth-thin, 1px) solid var(--color-border-muted);\n border-radius: var(--borderRadius-medium, 6px);\n }\n\n & img {\n width: 56px;\n height: 56px;\n }\n}\n\n.blankslate-icon {\n margin-right: var(--control-small-gap, 4px);\n margin-bottom: var(--stack-gap-condensed, 8px);\n margin-left: var(--control-small-gap, 4px);\n color: var(--color-fg-muted);\n}\n\n.blankslate-image {\n margin-bottom: var(--stack-gap-normal, 16px);\n}\n\n.blankslate-heading {\n margin-bottom: var(--base-size-4, 4px);\n}\n\n.blankslate-action {\n margin-top: var(--stack-gap-normal, 16px);\n\n &:first-of-type {\n margin-top: var(--stack-gap-spacious, 24px);\n }\n\n &:last-of-type {\n margin-bottom: var(--stack-gap-condensed, 8px);\n }\n}\n\n.blankslate-capped {\n border-radius: 0 0 var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px);\n}\n\n.blankslate-spacious {\n padding: var(--base-size-80, 80px) var(--base-size-40, 40px);\n}\n\n.blankslate-narrow {\n max-width: 485px;\n margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n & img {\n width: 80px;\n height: 80px;\n }\n\n & h3 {\n margin: var(--stack-gap-normal, 16px) 0;\n\n /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n font-size: 24px;\n }\n\n & p {\n font-size: var(--text-body-size-large, 16px);\n }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n border: 0;\n}\n"]}
1
+ {"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,YAEE,gCAA4B,CAD5B,iBAAkB,CAElB,iBAkBF,CAhBE,cACE,2BACF,CAEA,iBAGE,sCAAuC,CACvC,gFAA+D,CAC/D,4CAAyC,CAHzC,8CAAuC,CADvC,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,2BAA4B,CAF5B,8CAAyC,CACzC,2CAAqC,CAFrC,4CAIF,CAEA,kBACE,0CACF,CAEA,oBACE,uCACF,CAEA,mBACE,uCASF,CAPE,iCACE,2CACF,CAEA,gCACE,8CACF,CAGF,mBACE,+EACF,CAEA,qBACE,2DACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,qCAIF,CAEA,oBACE,0CACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n position: relative;\n padding: var(--base-size-32);\n text-align: center;\n\n & p {\n color: var(--color-fg-muted);\n }\n\n & code {\n padding: 2px 5px 3px;\n font-size: var(--text-body-size-medium);\n background: var(--color-canvas-default);\n border: var(--borderWidth-thin) solid var(--color-border-muted);\n border-radius: var(--borderRadius-medium);\n }\n\n & img {\n width: 56px;\n height: 56px;\n }\n}\n\n.blankslate-icon {\n margin-right: var(--control-small-gap);\n margin-bottom: var(--stack-gap-condensed);\n margin-left: var(--control-small-gap);\n color: var(--color-fg-muted);\n}\n\n.blankslate-image {\n margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n margin-bottom: var(--base-size-4);\n}\n\n.blankslate-action {\n margin-top: var(--stack-gap-normal);\n\n &:first-of-type {\n margin-top: var(--stack-gap-spacious);\n }\n\n &:last-of-type {\n margin-bottom: var(--stack-gap-condensed);\n }\n}\n\n.blankslate-capped {\n border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n padding: var(--base-size-80) var(--base-size-40);\n}\n\n.blankslate-narrow {\n max-width: 485px;\n margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n & img {\n width: 80px;\n height: 80px;\n }\n\n & h3 {\n margin: var(--stack-gap-normal) 0;\n\n /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n font-size: 24px;\n }\n\n & p {\n font-size: var(--text-body-size-large);\n }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n border: 0;\n}\n"]}
@@ -2,7 +2,7 @@
2
2
 
3
3
  .blankslate {
4
4
  position: relative;
5
- padding: var(--base-size-32, 32px);
5
+ padding: var(--base-size-32);
6
6
  text-align: center;
7
7
 
8
8
  & p {
@@ -11,10 +11,10 @@
11
11
 
12
12
  & code {
13
13
  padding: 2px 5px 3px;
14
- font-size: var(--text-body-size-medium, 14px);
14
+ font-size: var(--text-body-size-medium);
15
15
  background: var(--color-canvas-default);
16
- border: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
17
- border-radius: var(--borderRadius-medium, 6px);
16
+ border: var(--borderWidth-thin) solid var(--color-border-muted);
17
+ border-radius: var(--borderRadius-medium);
18
18
  }
19
19
 
20
20
  & img {
@@ -24,38 +24,38 @@
24
24
  }
25
25
 
26
26
  .blankslate-icon {
27
- margin-right: var(--control-small-gap, 4px);
28
- margin-bottom: var(--stack-gap-condensed, 8px);
29
- margin-left: var(--control-small-gap, 4px);
27
+ margin-right: var(--control-small-gap);
28
+ margin-bottom: var(--stack-gap-condensed);
29
+ margin-left: var(--control-small-gap);
30
30
  color: var(--color-fg-muted);
31
31
  }
32
32
 
33
33
  .blankslate-image {
34
- margin-bottom: var(--stack-gap-normal, 16px);
34
+ margin-bottom: var(--stack-gap-normal);
35
35
  }
36
36
 
37
37
  .blankslate-heading {
38
- margin-bottom: var(--base-size-4, 4px);
38
+ margin-bottom: var(--base-size-4);
39
39
  }
40
40
 
41
41
  .blankslate-action {
42
- margin-top: var(--stack-gap-normal, 16px);
42
+ margin-top: var(--stack-gap-normal);
43
43
 
44
44
  &:first-of-type {
45
- margin-top: var(--stack-gap-spacious, 24px);
45
+ margin-top: var(--stack-gap-spacious);
46
46
  }
47
47
 
48
48
  &:last-of-type {
49
- margin-bottom: var(--stack-gap-condensed, 8px);
49
+ margin-bottom: var(--stack-gap-condensed);
50
50
  }
51
51
  }
52
52
 
53
53
  .blankslate-capped {
54
- border-radius: 0 0 var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px);
54
+ border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
55
55
  }
56
56
 
57
57
  .blankslate-spacious {
58
- padding: var(--base-size-80, 80px) var(--base-size-40, 40px);
58
+ padding: var(--base-size-80) var(--base-size-40);
59
59
  }
60
60
 
61
61
  .blankslate-narrow {
@@ -72,14 +72,14 @@
72
72
  }
73
73
 
74
74
  & h3 {
75
- margin: var(--stack-gap-normal, 16px) 0;
75
+ margin: var(--stack-gap-normal) 0;
76
76
 
77
77
  /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
78
78
  font-size: 24px;
79
79
  }
80
80
 
81
81
  & p {
82
- font-size: var(--text-body-size-large, 16px);
82
+ font-size: var(--text-body-size-large);
83
83
  }
84
84
  }
85
85
 
@@ -1 +1 @@
1
- .Box{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,1px)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,8px) var(--stack-padding-normal,16px)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed, 8px)*-1) calc(var(--controlStack-small-gap-spacious, 16px)*-1);padding:var(--control-medium-paddingInline-condensed,8px) var(--control-medium-paddingInline-spacious,16px)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,8px) var(--stack-padding-normal,16px)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,24px)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,20px)}.Box--spacious .Box-body,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,24px)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious, 24px)*-1) calc(var(--stack-gap-spacious, 24px)*-1);padding:var(--stack-padding-spacious,24px)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,24px)}.Box-header{background-color:var(--color-canvas-subtle);border-color:var(--color-border-default);border-style:solid;border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px);border-width:var(--borderWidth-thin,1px);margin:calc(var(--borderWidth-thin, 1px)*-1) calc(var(--borderWidth-thin, 1px)*-1) 0;padding:var(--stack-padding-normal,16px)}.Box-title{font-size:var(--text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,1px) solid var(--color-border-default);padding:var(--stack-padding-normal,16px)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px);margin-bottom:calc(var(--borderWidth-thin, 1px)*-1)}.Box-row{border-top:var(--borderWidth-thin,1px) solid var(--color-border-muted);list-style-type:none;margin-top:calc(var(--borderWidth-thin, 1px)*-1);padding:var(--stack-padding-normal,16px)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--color-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--color-accent-fg);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--color-canvas-subtle)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--color-canvas-subtle)}.Box-row--focus-blue.navigation-focus{background-color:var(--color-accent-subtle)}.Box-row--hover-gray:hover{background-color:var(--color-canvas-subtle)}.Box-row--hover-blue:hover{background-color:var(--color-accent-subtle)}@media (min-width:768px){.Box-row-link{color:var(--color-fg-default);text-decoration:none}.Box-row-link:hover{color:var(--color-accent-fg);text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px);border-top:var(--borderWidth-thin,1px) solid var(--color-border-default);margin-top:calc(var(--borderWidth-thin, 1px)*-1);padding:var(--stack-padding-normal,16px)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--color-accent-muted)}.Box--blue .Box-header{background-color:var(--color-accent-subtle)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--color-accent-muted)}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--color-danger-emphasis)}.Box-header--blue{background-color:var(--color-accent-subtle);border-color:var(--color-accent-muted)}.Box-row--yellow{background-color:var(--color-attention-subtle)}.Box-row--blue{background-color:var(--color-accent-subtle)}.Box-row--gray{background-color:var(--color-canvas-subtle)}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious, 16px)*-1) calc(var(--controlStack-small-gap-spacious, 16px)*-1);padding:var(--control-medium-paddingInline-spacious,16px) var(--control-medium-paddingInline-spacious,16px)}
1
+ .Box{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem))}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed,.5rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,1.25rem)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious,1.5rem)*-1) calc(var(--stack-gap-spacious,1.5rem)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,1.5rem)}.Box-header{background-color:var(--color-canvas-subtle);border-color:var(--color-border-default);border-style:solid;border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px);border-width:var(--borderWidth-thin,max(1px,.0625rem));margin:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) 0;padding:var(--stack-padding-normal,1rem)}.Box-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);padding:var(--stack-padding-normal,1rem)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px);margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.Box-row{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-muted);list-style-type:none;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--color-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--color-accent-fg);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--color-canvas-subtle)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--color-canvas-subtle)}.Box-row--focus-blue.navigation-focus{background-color:var(--color-accent-subtle)}.Box-row--hover-gray:hover{background-color:var(--color-canvas-subtle)}.Box-row--hover-blue:hover{background-color:var(--color-accent-subtle)}@media (min-width:768px){.Box-row-link{color:var(--color-fg-default);text-decoration:none}.Box-row-link:hover{color:var(--color-accent-fg);text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px);border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--color-accent-muted)}.Box--blue .Box-header{background-color:var(--color-accent-subtle)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--color-accent-muted)}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--color-danger-emphasis)}.Box-header--blue{background-color:var(--color-accent-subtle);border-color:var(--color-accent-muted)}.Box-row--yellow{background-color:var(--color-attention-subtle)}.Box-row--blue{background-color:var(--color-accent-subtle)}.Box-row--gray{background-color:var(--color-canvas-subtle)}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious,1rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem) var(--control-medium-paddingInline-spacious,1rem)}
@@ -11,8 +11,8 @@
11
11
  ".Box--spacious .Box-header",
12
12
  ".Box--spacious .Box-title",
13
13
  ".Box--spacious .Box-body",
14
- ".Box--spacious .Box-footer",
15
14
  ".Box--spacious .Box-btn-octicon.btn-octicon",
15
+ ".Box--spacious .Box-footer",
16
16
  ".Box--spacious .Box-row",
17
17
  ".Box-header",
18
18
  ".Box-title",
@@ -1 +1 @@
1
- {"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAGA,KACE,4CAA6C,CAC7C,wCAAyC,CAGzC,4CAA8C,CAF9C,kBAAmB,CACnB,wCAEF,CAGA,gBACE,gBA0BF,CAhBE,kFACE,2EACF,CAGE,6CAIE,gBAAiB,CAFjB,mHACyD,CAFzD,2GAIF,CAGF,yBACE,2EACF,CAIA,2BAEE,gBAAiB,CADjB,0CAEF,CAEA,0BACE,4CACF,CAMA,oDACE,0CACF,CAGE,4CAEE,wFAA6F,CAD7F,0CAEF,CAGF,wBACE,0CACF,CAGF,YAGE,2CAA4C,CAC5C,wCAAyC,CACzC,kBAAmB,CAEnB,qDAAuD,CACvD,sDAAwD,CAFxD,wCAA0C,CAJ1C,oFAAyF,CADzF,wCAQF,CAEA,WACE,2CAA6C,CAC7C,gDACF,CAEA,UAEE,2EAA6E,CAD7E,wCASF,CALE,uBAGE,wDAA0D,CAD1D,yDAA2D,CAD3D,mDAGF,CAIF,SAME,sEAA8C,CAH9C,oBAAqB,CADrB,gDAAmD,CADnD,wCAqDF,CA9CE,uBACE,qDAAuD,CACvD,sDACF,CAEA,sBAEE,wDAA0D,CAD1D,yDAEF,CAIA,yCAGE,qDACF,CAIE,gDACE,4BAA6B,CAC7B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,2CAMF,CAHE,6DACE,SACF,CAMJ,sCACE,2CACF,CAIA,sCACE,2CACF,CAIA,2BACE,2CACF,CAIA,2BACE,2CACF,CAOA,yBADF,cAEI,6BAA8B,CAC9B,oBAOJ,CALI,oBACE,4BAA6B,CAC7B,oBACF,CACF,CAKF,sBACE,SACF,CAEA,YAME,+EAAkF,CADlF,wEAA8C,CAH9C,gDAAmD,CADnD,wCAMF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,sCAKA,CAHA,uBACE,2CAEF,CAUA,gEACE,sCACF,CAeE,qFACE,yCACF,CAIJ,kBACE,2CAA4C,CAC5C,sCACF,CAIA,iBACE,8CACF,CAEA,eACE,2CACF,CAEA,eACE,2CACF,CAKE,6BAIE,eAAgB,CAFhB,kHACyD,CAFzD,2GAIF","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n background-color: var(--color-canvas-default);\n border-color: var(--color-border-default);\n border-style: solid;\n border-width: var(--borderWidth-thin, 1px);\n border-radius: var(--borderRadius-medium, 6px);\n}\n\n/* Box padding density options */\n.Box--condensed {\n line-height: 1.25;\n\n & .Box-header {\n padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);\n }\n\n & .Box-body {\n padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);\n }\n\n & .Box-footer {\n padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);\n }\n\n & .Box-btn-octicon {\n &.btn-octicon {\n padding: var(--control-medium-paddingInline-condensed, 8px) var(--control-medium-paddingInline-spacious, 16px);\n margin: calc(var(--controlStack-medium-gap-condensed, 8px) * -1)\n calc(var(--controlStack-small-gap-spacious, 16px) * -1);\n line-height: 1.25;\n }\n }\n\n & .Box-row {\n padding: var(--stack-padding-condensed, 8px) var(--stack-padding-normal, 16px);\n }\n}\n\n.Box--spacious {\n & .Box-header {\n padding: var(--stack-padding-spacious, 24px);\n line-height: 1.25;\n }\n\n & .Box-title {\n font-size: var(--text-title-size-medium, 20px);\n }\n\n & .Box-body {\n padding: var(--stack-padding-spacious, 24px);\n }\n\n & .Box-footer {\n padding: var(--stack-padding-spacious, 24px);\n }\n\n & .Box-btn-octicon {\n &.btn-octicon {\n padding: var(--stack-padding-spacious, 24px);\n margin: calc(var(--stack-gap-spacious, 24px) * -1) calc(var(--stack-gap-spacious, 24px) * -1);\n }\n }\n\n & .Box-row {\n padding: var(--stack-padding-spacious, 24px);\n }\n}\n\n.Box-header {\n padding: var(--stack-padding-normal, 16px);\n margin: calc(var(--borderWidth-thin, 1px) * -1) calc(var(--borderWidth-thin, 1px) * -1) 0;\n background-color: var(--color-canvas-subtle);\n border-color: var(--color-border-default);\n border-style: solid;\n border-width: var(--borderWidth-thin, 1px);\n border-top-left-radius: var(--borderRadius-medium, 6px);\n border-top-right-radius: var(--borderRadius-medium, 6px);\n}\n\n.Box-title {\n font-size: var(--text-body-size-medium, 14px);\n font-weight: var(--base-text-weight-semibold, 600);\n}\n\n.Box-body {\n padding: var(--stack-padding-normal, 16px);\n border-bottom: var(--borderWidth-thin, 1px) solid var(--color-border-default);\n\n /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n &:last-of-type {\n margin-bottom: calc(var(--borderWidth-thin, 1px) * -1);\n border-bottom-right-radius: var(--borderRadius-medium, 6px);\n border-bottom-left-radius: var(--borderRadius-medium, 6px);\n }\n}\n\n/* Box rows */\n.Box-row {\n padding: var(--stack-padding-normal, 16px);\n margin-top: calc(var(--borderWidth-thin, 1px) * -1);\n list-style-type: none; /* To account for applying Box component to a list */\n border-top-color: var(--color-border-muted);\n border-top-style: solid;\n border-top-width: var(--borderWidth-thin, 1px);\n\n &:first-of-type {\n border-top-left-radius: var(--borderRadius-medium, 6px);\n border-top-right-radius: var(--borderRadius-medium, 6px);\n }\n\n &:last-of-type {\n border-bottom-right-radius: var(--borderRadius-medium, 6px);\n border-bottom-left-radius: var(--borderRadius-medium, 6px);\n }\n\n /* Adds a blue vertical line to the left of the row\n ** For indicating a row item is unread */\n &.Box-row--unread,\n /* .unread to be deprecated with .Box-row-unread */\n &.unread {\n box-shadow: inset 2px 0 0 var(--color-accent-emphasis);\n }\n\n &.navigation-focus {\n /* Focus styles for when drag icon */\n & .Box-row--drag-button {\n color: var(--color-accent-fg);\n cursor: grab;\n opacity: 100;\n }\n\n /* Grabbing while row is dragged */\n &.is-dragging .Box-row--drag-button {\n cursor: grabbing;\n }\n\n /* Row dragging styles */\n &.sortable-chosen {\n background-color: var(--color-canvas-subtle);\n }\n\n /* Makes dragging row background gray */\n &.sortable-ghost {\n background-color: var(--color-canvas-subtle);\n\n /* Hides contents of row while dragging so row looks solid gray */\n & .Box-row--drag-hide {\n opacity: 0;\n }\n }\n }\n}\n\n.Box-row--focus-gray {\n &.navigation-focus {\n background-color: var(--color-canvas-subtle);\n }\n}\n\n.Box-row--focus-blue {\n &.navigation-focus {\n background-color: var(--color-accent-subtle);\n }\n}\n\n.Box-row--hover-gray {\n &:hover {\n background-color: var(--color-canvas-subtle);\n }\n}\n\n.Box-row--hover-blue {\n &:hover {\n background-color: var(--color-accent-subtle);\n }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n @media (min-width: 768px) {\n color: var(--color-fg-default);\n text-decoration: none;\n\n &:hover {\n color: var(--color-accent-fg);\n text-decoration: none;\n }\n }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n opacity: 0;\n}\n\n.Box-footer {\n padding: var(--stack-padding-normal, 16px);\n margin-top: calc(var(--borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */\n border-top-color: var(--color-border-default);\n border-top-style: solid;\n border-top-width: var(--borderWidth-thin, 1px);\n border-radius: 0 0 var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n max-height: 324px;\n overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n border-color: var(--color-accent-muted);\n\n & .Box-header {\n background-color: var(--color-accent-subtle);\n border-color: var(--color-accent-muted);\n }\n\n & .Box-body {\n border-color: var(--color-accent-muted);\n }\n\n & .Box-row {\n border-color: var(--color-accent-muted);\n }\n\n & .Box-footer {\n border-color: var(--color-accent-muted);\n }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n border-color: var(--color-danger-emphasis);\n\n & .Box-row {\n &:first-of-type {\n border-color: var(--color-danger-emphasis);\n }\n }\n\n & .Box-body {\n &:last-of-type {\n border-color: var(--color-danger-emphasis);\n }\n }\n}\n\n.Box-header--blue {\n background-color: var(--color-accent-subtle);\n border-color: var(--color-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n background-color: var(--color-attention-subtle);\n}\n\n.Box-row--blue {\n background-color: var(--color-accent-subtle);\n}\n\n.Box-row--gray {\n background-color: var(--color-canvas-subtle);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n &.btn-octicon {\n padding: var(--control-medium-paddingInline-spacious, 16px) var(--control-medium-paddingInline-spacious, 16px);\n margin: calc(var(--controlStack-small-gap-spacious, 16px) * -1)\n calc(var(--controlStack-small-gap-spacious, 16px) * -1);\n line-height: 1.5; /* override btn-octicon line-height */\n }\n}\n"]}
1
+ {"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAGA,KACE,4CAA6C,CAC7C,wCAAyC,CAGzC,4CAAyC,CAFzC,kBAAmB,CACnB,sDAEF,CAGA,gBACE,gBAyBF,CAfE,kFACE,6EACF,CAGE,6CAGE,gBAAiB,CADjB,mHAA6G,CAD7G,6GAGF,CAGF,yBACE,6EACF,CAIA,2BAEE,gBAAiB,CADjB,4CAEF,CAEA,0BACE,+CACF,CAWE,gGAJA,4CAOA,CAHA,4CAEE,0FACF,CAGF,wBACE,4CACF,CAGF,YAGE,2CAA4C,CAC5C,wCAAyC,CACzC,kBAAmB,CAEnB,qDAAkD,CAClD,sDAAmD,CAFnD,sDAAqC,CAJrC,gHAA+E,CAD/E,wCAQF,CAEA,WACE,8CAAuC,CACvC,gDACF,CAEA,UAEE,yFAAwE,CADxE,wCASF,CALE,uBAGE,wDAAqD,CADrD,yDAAsD,CADtD,iEAGF,CAIF,SAME,oFAAyC,CAHzC,oBAAqB,CADrB,8DAA8C,CAD9C,wCAqDF,CA9CE,uBACE,qDAAkD,CAClD,sDACF,CAEA,sBAEE,wDAAqD,CADrD,yDAEF,CAIA,yCAGE,qDACF,CAIE,gDACE,4BAA6B,CAC7B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,2CAMF,CAHE,6DACE,SACF,CAMJ,sCACE,2CACF,CAIA,sCACE,2CACF,CAIA,2BACE,2CACF,CAIA,2BACE,2CACF,CAOA,yBADF,cAEI,6BAA8B,CAC9B,oBAOJ,CALI,oBACE,4BAA6B,CAC7B,oBACF,CACF,CAKF,sBACE,SACF,CAEA,YAME,+EAAwE,CADxE,sFAAyC,CAHzC,8DAA8C,CAD9C,wCAMF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,sCAKA,CAHA,uBACE,2CAEF,CAUA,gEACE,sCACF,CAeE,qFACE,yCACF,CAIJ,kBACE,2CAA4C,CAC5C,sCACF,CAIA,iBACE,8CACF,CAEA,eACE,2CACF,CAEA,eACE,2CACF,CAKE,6BAGE,eAAgB,CADhB,gHAA2G,CAD3G,2GAGF","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n background-color: var(--color-canvas-default);\n border-color: var(--color-border-default);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-radius: var(--borderRadius-medium);\n}\n\n/* Box padding density options */\n.Box--condensed {\n line-height: 1.25;\n\n & .Box-header {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n\n & .Box-body {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n\n & .Box-footer {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n\n & .Box-btn-octicon {\n &.btn-octicon {\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n line-height: 1.25;\n }\n }\n\n & .Box-row {\n padding: var(--stack-padding-condensed) var(--stack-padding-normal);\n }\n}\n\n.Box--spacious {\n & .Box-header {\n padding: var(--stack-padding-spacious);\n line-height: 1.25;\n }\n\n & .Box-title {\n font-size: var(--text-title-size-medium);\n }\n\n & .Box-body {\n padding: var(--stack-padding-spacious);\n }\n\n & .Box-footer {\n padding: var(--stack-padding-spacious);\n }\n\n & .Box-btn-octicon {\n &.btn-octicon {\n padding: var(--stack-padding-spacious);\n margin: calc(var(--stack-gap-spacious) * -1) calc(var(--stack-gap-spacious) * -1);\n }\n }\n\n & .Box-row {\n padding: var(--stack-padding-spacious);\n }\n}\n\n.Box-header {\n padding: var(--stack-padding-normal);\n margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;\n background-color: var(--color-canvas-subtle);\n border-color: var(--color-border-default);\n border-style: solid;\n border-width: var(--borderWidth-thin);\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n}\n\n.Box-title {\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-semibold);\n}\n\n.Box-body {\n padding: var(--stack-padding-normal);\n border-bottom: var(--borderWidth-thin) solid var(--color-border-default);\n\n /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n &:last-of-type {\n margin-bottom: calc(var(--borderWidth-thin) * -1);\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n}\n\n/* Box rows */\n.Box-row {\n padding: var(--stack-padding-normal);\n margin-top: calc(var(--borderWidth-thin) * -1);\n list-style-type: none; /* To account for applying Box component to a list */\n border-top-color: var(--color-border-muted);\n border-top-style: solid;\n border-top-width: var(--borderWidth-thin);\n\n &:first-of-type {\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n }\n\n &:last-of-type {\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n\n /* Adds a blue vertical line to the left of the row\n ** For indicating a row item is unread */\n &.Box-row--unread,\n /* .unread to be deprecated with .Box-row-unread */\n &.unread {\n box-shadow: inset 2px 0 0 var(--color-accent-emphasis);\n }\n\n &.navigation-focus {\n /* Focus styles for when drag icon */\n & .Box-row--drag-button {\n color: var(--color-accent-fg);\n cursor: grab;\n opacity: 100;\n }\n\n /* Grabbing while row is dragged */\n &.is-dragging .Box-row--drag-button {\n cursor: grabbing;\n }\n\n /* Row dragging styles */\n &.sortable-chosen {\n background-color: var(--color-canvas-subtle);\n }\n\n /* Makes dragging row background gray */\n &.sortable-ghost {\n background-color: var(--color-canvas-subtle);\n\n /* Hides contents of row while dragging so row looks solid gray */\n & .Box-row--drag-hide {\n opacity: 0;\n }\n }\n }\n}\n\n.Box-row--focus-gray {\n &.navigation-focus {\n background-color: var(--color-canvas-subtle);\n }\n}\n\n.Box-row--focus-blue {\n &.navigation-focus {\n background-color: var(--color-accent-subtle);\n }\n}\n\n.Box-row--hover-gray {\n &:hover {\n background-color: var(--color-canvas-subtle);\n }\n}\n\n.Box-row--hover-blue {\n &:hover {\n background-color: var(--color-accent-subtle);\n }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n @media (min-width: 768px) {\n color: var(--color-fg-default);\n text-decoration: none;\n\n &:hover {\n color: var(--color-accent-fg);\n text-decoration: none;\n }\n }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n opacity: 0;\n}\n\n.Box-footer {\n padding: var(--stack-padding-normal);\n margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */\n border-top-color: var(--color-border-default);\n border-top-style: solid;\n border-top-width: var(--borderWidth-thin);\n border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n max-height: 324px;\n overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n border-color: var(--color-accent-muted);\n\n & .Box-header {\n background-color: var(--color-accent-subtle);\n border-color: var(--color-accent-muted);\n }\n\n & .Box-body {\n border-color: var(--color-accent-muted);\n }\n\n & .Box-row {\n border-color: var(--color-accent-muted);\n }\n\n & .Box-footer {\n border-color: var(--color-accent-muted);\n }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n border-color: var(--color-danger-emphasis);\n\n & .Box-row {\n &:first-of-type {\n border-color: var(--color-danger-emphasis);\n }\n }\n\n & .Box-body {\n &:last-of-type {\n border-color: var(--color-danger-emphasis);\n }\n }\n}\n\n.Box-header--blue {\n background-color: var(--color-accent-subtle);\n border-color: var(--color-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n background-color: var(--color-attention-subtle);\n}\n\n.Box-row--blue {\n background-color: var(--color-accent-subtle);\n}\n\n.Box-row--gray {\n background-color: var(--color-canvas-subtle);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n &.btn-octicon {\n padding: var(--control-medium-paddingInline-spacious) var(--control-medium-paddingInline-spacious);\n margin: calc(var(--controlStack-small-gap-spacious) * -1) calc(var(--controlStack-small-gap-spacious) * -1);\n line-height: 1.5; /* override btn-octicon line-height */\n }\n}\n"]}