primer_view_components 0.1.5 → 0.1.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +28 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +3 -3
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list/form_wrapper.html.erb +10 -0
- data/app/components/primer/alpha/action_list/form_wrapper.rb +61 -0
- data/app/components/primer/alpha/action_list/item.html.erb +41 -36
- data/app/components/primer/alpha/action_list/item.rb +18 -4
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.html.erb +5 -0
- data/app/components/primer/alpha/action_list.pcss +37 -37
- data/app/components/primer/alpha/action_list.rb +18 -1
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +8 -1
- data/app/components/primer/alpha/action_menu/action_menu_element.js +100 -22
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +119 -20
- data/app/components/primer/alpha/action_menu/list.rb +27 -19
- data/app/components/primer/alpha/action_menu.rb +106 -29
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.pcss +2 -2
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +7 -7
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.json +0 -2
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +33 -36
- data/app/components/primer/alpha/dropdown/menu.rb +1 -1
- data/app/components/primer/alpha/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/dropdown.pcss +12 -11
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/layout.pcss +4 -4
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/menu.pcss +20 -20
- data/app/components/primer/alpha/modal_dialog.js +12 -0
- data/app/components/primer/alpha/modal_dialog.ts +17 -0
- data/app/components/primer/alpha/overlay.css +1 -1
- data/app/components/primer/alpha/overlay.css.map +1 -1
- data/app/components/primer/alpha/overlay.pcss +1 -1
- data/app/components/primer/alpha/overlay.rb +9 -5
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +27 -38
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.pcss +12 -12
- data/app/components/primer/alpha/text_field.css +3 -3
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +74 -88
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.pcss +9 -9
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.pcss +7 -7
- data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -1
- data/app/components/primer/beta/auto_complete/item.html.erb +9 -9
- data/app/components/primer/beta/auto_complete/item.rb +17 -13
- data/app/components/primer/beta/auto_complete.rb +20 -2
- data/app/components/primer/beta/avatar.css +1 -1
- data/app/components/primer/beta/avatar.css.map +1 -1
- data/app/components/primer/beta/avatar.pcss +2 -2
- data/app/components/primer/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.pcss +5 -5
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/blankslate.pcss +13 -13
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.json +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/border_box.pcss +41 -39
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +0 -2
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +27 -29
- data/app/components/primer/beta/counter.css +1 -1
- data/app/components/primer/beta/counter.css.map +1 -1
- data/app/components/primer/beta/counter.pcss +3 -3
- data/app/components/primer/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/flash.pcss +10 -11
- data/app/components/primer/beta/label.css +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.pcss +2 -2
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.pcss +4 -4
- data/app/components/primer/beta/state.css +1 -1
- data/app/components/primer/beta/state.css.map +1 -1
- data/app/components/primer/beta/state.pcss +5 -5
- data/app/components/primer/beta/subhead.css +1 -1
- data/app/components/primer/beta/subhead.css.map +1 -1
- data/app/components/primer/beta/subhead.pcss +4 -4
- data/app/components/primer/beta/timeline_item.css +1 -1
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/app/components/primer/beta/timeline_item.pcss +13 -13
- data/app/components/primer/beta/truncate.css +1 -1
- data/app/components/primer/beta/truncate.css.map +1 -1
- data/app/components/primer/beta/truncate.pcss +1 -1
- data/lib/postcss_mixins/activeIndicatorLine.pcss +1 -1
- data/lib/primer/view_components/linters/disallow_component_css_counter.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/yard/component_manifest.rb +1 -0
- data/previews/primer/alpha/action_menu_preview/content_labels.html.erb +9 -0
- data/previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb +13 -0
- data/previews/primer/alpha/action_menu_preview/single_select_form.html.erb +13 -0
- data/previews/primer/alpha/action_menu_preview/submitting_forms.html.erb +15 -0
- data/previews/primer/alpha/action_menu_preview.rb +89 -38
- data/previews/primer/beta/auto_complete_preview.rb +36 -23
- data/static/arguments.json +43 -2
- data/static/audited_at.json +1 -0
- data/static/constants.json +37 -9
- data/static/info_arch.json +137 -23
- data/static/previews.json +25 -0
- data/static/statuses.json +1 -0
- metadata +12 -6
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,
|
1
|
+
{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAAqC,CACrC,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,yCAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,iCAAmC,CACnC,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,4CAA8C,CAN9C,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,2CAA6C,CAC7C,gBAAiB,CAFjB,2DAA6D,CAF7D,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAAkD,CADlD,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAiBF,CAZE,0JAQE,4CAA6C,CAC7C,4CAA8C,CAL9C,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,0CAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n display: flex;\n min-height: var(--base-size-48, 48px);\n overflow-x: auto;\n overflow-y: hidden;\n box-shadow: inset 0 -1px 0 var(--color-border-muted);\n -webkit-overflow-scrolling: auto;\n justify-content: space-between;\n\n & .Counter {\n margin-left: var(--control-medium-gap, 8px);\n color: var(--color-fg-default);\n background-color: var(--color-neutral-muted);\n }\n\n & .Counter--primary {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-neutral-emphasis);\n }\n}\n\n.UnderlineNav-body {\n display: flex;\n align-items: center;\n gap: var(--control-medium-gap, 8px);\n list-style: none;\n}\n\n.UnderlineNav-item {\n position: relative;\n display: flex;\n padding: 0 var(--control-medium-paddingInline-condensed, 8px);\n font-size: var(--text-body-size-medium, 14px);\n line-height: 30px;\n color: var(--color-fg-default);\n text-align: center;\n white-space: nowrap;\n cursor: pointer;\n background-color: transparent;\n border: 0;\n border-radius: var(--borderRadius-medium, 6px);\n align-items: center;\n\n &:hover,\n &:focus,\n &:focus-visible {\n color: var(--color-fg-default);\n text-decoration: none;\n border-bottom-color: var(--color-neutral-muted);\n outline-offset: -2px;\n transition: border-bottom-color 0.12s ease-out;\n }\n\n /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n & [data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold, 600);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* increase touch target area */\n &::before {\n @mixin minTouchTarget 48px;\n }\n\n /* hover state was \"sticking\" on mobile after click */\n @media (pointer: fine) {\n &:hover {\n color: var(--color-fg-default);\n text-decoration: none;\n background: var(--color-action-list-item-default-hover-bg);\n transition: background 0.12s ease-out;\n }\n }\n\n &.selected,\n &[role='tab'][aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-fg-default);\n border-bottom-color: var(--color-primer-border-active);\n\n /* current/selected underline */\n &::after {\n position: absolute;\n z-index: 1; /* raise above full-width flash banner */\n right: 50%;\n bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n width: 100%;\n height: 2px;\n content: '';\n background: var(--color-primer-border-active);\n border-radius: var(--borderRadius-medium, 6px);\n transform: translate(50%, -50%);\n }\n }\n}\n\n.UnderlineNav--right {\n justify-content: flex-end;\n\n & .UnderlineNav-actions {\n flex: 1 1 auto;\n }\n}\n\n.UnderlineNav-actions {\n align-self: center;\n}\n\n.UnderlineNav--full {\n display: block;\n\n /* required for underline to align with additional wrapper element */\n & .UnderlineNav-body {\n min-height: var(--base-size-48, 48px);\n }\n}\n\n.UnderlineNav-octicon {\n display: inline !important;\n margin-right: var(--control-medium-gap, 8px);\n color: var(--color-fg-muted);\n fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n display: flex;\n justify-content: space-between;\n}\n",null]}
|
@@ -10,7 +10,7 @@
|
|
10
10
|
justify-content: space-between;
|
11
11
|
|
12
12
|
& .Counter {
|
13
|
-
margin-left: var(--
|
13
|
+
margin-left: var(--control-medium-gap, 8px);
|
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(--
|
27
|
+
gap: var(--control-medium-gap, 8px);
|
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(--
|
35
|
-
font-size: var(--
|
34
|
+
padding: 0 var(--control-medium-paddingInline-condensed, 8px);
|
35
|
+
font-size: var(--text-body-size-medium, 14px);
|
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(--
|
43
|
+
border-radius: var(--borderRadius-medium, 6px);
|
44
44
|
align-items: center;
|
45
45
|
|
46
46
|
&:hover,
|
@@ -94,7 +94,7 @@
|
|
94
94
|
height: 2px;
|
95
95
|
content: '';
|
96
96
|
background: var(--color-primer-border-active);
|
97
|
-
border-radius: var(--
|
97
|
+
border-radius: var(--borderRadius-medium, 6px);
|
98
98
|
transform: translate(50%, -50%);
|
99
99
|
}
|
100
100
|
}
|
@@ -123,7 +123,7 @@
|
|
123
123
|
|
124
124
|
.UnderlineNav-octicon {
|
125
125
|
display: inline !important;
|
126
|
-
margin-right: var(--
|
126
|
+
margin-right: var(--control-medium-gap, 8px);
|
127
127
|
color: var(--color-fg-muted);
|
128
128
|
fill: var(--color-fg-muted);
|
129
129
|
}
|
@@ -1,20 +1,20 @@
|
|
1
1
|
<%= render Primer::BaseComponent.new(**@system_arguments) do %>
|
2
|
-
<span class="
|
2
|
+
<span class="ActionListContent">
|
3
3
|
<% if leading_visual %>
|
4
|
-
<span class="
|
4
|
+
<span class="ActionListItem-visual ActionListItem-visual--leading">
|
5
5
|
<%= leading_visual %>
|
6
6
|
</span>
|
7
7
|
<% end %>
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
8
|
+
<%= render(Primer::ConditionalWrapper.new(condition: description?, tag: :span, **@description_wrapper_arguments)) do %>
|
9
|
+
<span class="ActionListItem-label"><%= content %></span>
|
10
|
+
<% if description? %>
|
11
|
+
<span class="ActionListItem-description">
|
12
|
+
<%= description %>
|
12
13
|
</span>
|
13
|
-
|
14
|
-
<span class="ActionList-item-label"><%= content %></span>
|
14
|
+
<% end %>
|
15
15
|
<% end %>
|
16
16
|
<% if trailing_visual %>
|
17
|
-
<span class="
|
17
|
+
<span class="ActionListItem-visual ActionListItem-visual--trailing">
|
18
18
|
<%= trailing_visual %>
|
19
19
|
</span>
|
20
20
|
<% end %>
|
@@ -8,7 +8,12 @@ module Primer
|
|
8
8
|
class Item < Primer::Component
|
9
9
|
status :beta
|
10
10
|
|
11
|
-
|
11
|
+
DEFAULT_DESCRIPTION_VARIANT = :block
|
12
|
+
DESCRIPTION_VARIANT_MAPPINGS = {
|
13
|
+
:inline => "ActionListItem-descriptionWrap--inline",
|
14
|
+
DEFAULT_DESCRIPTION_VARIANT => "ActionListItem-descriptionWrap"
|
15
|
+
}.freeze
|
16
|
+
DESCRIPTION_VARIANT_OPTIONS = DESCRIPTION_VARIANT_MAPPINGS.keys.freeze
|
12
17
|
|
13
18
|
# The leading visual rendered before the link.
|
14
19
|
#
|
@@ -48,8 +53,10 @@ module Primer
|
|
48
53
|
# @param description_variant [Hash] Changes the description style. Allowed values are :inline, :block
|
49
54
|
# @param description [String] Display description text below label
|
50
55
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
51
|
-
def initialize(value:, selected: false, disabled: false, description_variant:
|
52
|
-
@description_variant =
|
56
|
+
def initialize(value:, selected: false, disabled: false, description_variant: DEFAULT_DESCRIPTION_VARIANT, **system_arguments)
|
57
|
+
@description_variant = fetch_or_fallback(
|
58
|
+
DESCRIPTION_VARIANT_OPTIONS, description_variant, DEFAULT_DESCRIPTION_VARIANT
|
59
|
+
)
|
53
60
|
|
54
61
|
@system_arguments = deny_tag_argument(**system_arguments)
|
55
62
|
@system_arguments[:tag] = :li
|
@@ -60,19 +67,16 @@ module Primer
|
|
60
67
|
@system_arguments[:"aria-disabled"] = true if disabled
|
61
68
|
|
62
69
|
@system_arguments[:classes] = class_names(
|
63
|
-
"
|
70
|
+
"ActionListItem",
|
64
71
|
system_arguments[:classes]
|
65
72
|
)
|
66
|
-
end
|
67
73
|
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
"ActionList-item-descriptionWrap--inline"
|
75
|
-
end
|
74
|
+
@description_wrapper_arguments = {
|
75
|
+
classes: class_names(
|
76
|
+
"ActionListItem-descriptionWrap",
|
77
|
+
DESCRIPTION_VARIANT_MAPPINGS[@description_variant]
|
78
|
+
)
|
79
|
+
}
|
76
80
|
end
|
77
81
|
end
|
78
82
|
end
|
@@ -22,6 +22,17 @@ module Primer
|
|
22
22
|
}.freeze
|
23
23
|
SIZE_OPTIONS = SIZE_MAPPINGS.keys
|
24
24
|
|
25
|
+
DEFAULT_WIDTH = :auto
|
26
|
+
WIDTH_MAPPINGS = {
|
27
|
+
DEFAULT_WIDTH => "Overlay--width-auto",
|
28
|
+
:small => "Overlay--width-small",
|
29
|
+
:medium => "Overlay--width-medium",
|
30
|
+
:large => "Overlay--width-large",
|
31
|
+
:xlarge => "Overlay--width-xlarge",
|
32
|
+
:xxlarge => "Overlay--width-xxlarge"
|
33
|
+
}.freeze
|
34
|
+
WIDTH_OPTIONS = WIDTH_MAPPINGS.keys
|
35
|
+
|
25
36
|
# Customizable results list.
|
26
37
|
#
|
27
38
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
@@ -30,7 +41,7 @@ module Primer
|
|
30
41
|
system_arguments[:tag] = :ul
|
31
42
|
system_arguments[:id] = @list_id
|
32
43
|
system_arguments[:classes] = class_names(
|
33
|
-
"
|
44
|
+
"ActionListWrap",
|
34
45
|
system_arguments[:classes]
|
35
46
|
)
|
36
47
|
|
@@ -156,12 +167,13 @@ module Primer
|
|
156
167
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
157
168
|
# @param size [Hash] Input size can be small, medium (default), or large
|
158
169
|
# @param full_width [Boolean] Input can be full-width or fit to content
|
170
|
+
# @param width [String] Optional parameter to set max width of results list. <%= one_of(Primer::Beta::AutoComplete::WIDTH_OPTIONS) %>
|
159
171
|
# @param disabled [Boolean] Disabled input
|
160
172
|
# @param invalid [Boolean] Invalid input
|
161
173
|
# @param placeholder [String] The placeholder text displayed within the input
|
162
174
|
# @param inset [Boolean] subtle input background color
|
163
175
|
# @param monospace [Boolean] monospace input font family
|
164
|
-
def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments)
|
176
|
+
def initialize(label_text:, src:, list_id:, input_id:, input_name: nil, placeholder: nil, show_clear_button: false, visually_hide_label: false, size: DEFAULT_SIZE, full_width: false, width: DEFAULT_WIDTH, disabled: false, invalid: false, inset: false, monospace: false, **system_arguments)
|
165
177
|
@label_text = label_text
|
166
178
|
@list_id = list_id
|
167
179
|
@input_id = input_id
|
@@ -179,6 +191,7 @@ module Primer
|
|
179
191
|
@inset = inset
|
180
192
|
@monospace = monospace
|
181
193
|
@full_width = full_width
|
194
|
+
@width = width
|
182
195
|
@field_wrap_classes = class_names(
|
183
196
|
"FormControl-input-wrap",
|
184
197
|
SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, DEFAULT_SIZE)],
|
@@ -188,6 +201,11 @@ module Primer
|
|
188
201
|
"FormControl",
|
189
202
|
"FormControl--fullWidth": full_width
|
190
203
|
)
|
204
|
+
@overlay_classes = class_names(
|
205
|
+
"Overlay",
|
206
|
+
"Overlay--height-auto",
|
207
|
+
WIDTH_MAPPINGS[fetch_or_fallback(WIDTH_OPTIONS, @width, DEFAULT_WIDTH)]
|
208
|
+
)
|
191
209
|
end
|
192
210
|
|
193
211
|
# add `input` and `results` without needing to explicitly call them in the view
|
@@ -1 +1 @@
|
|
1
|
-
.avatar{background-color:var(--color-avatar-bg);border-radius:var(--
|
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 +1 @@
|
|
1
|
-
{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,uCAAwC,CACxC,
|
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"]}
|
@@ -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(--
|
9
|
+
border-radius: var(--borderRadius-medium, 6px);
|
10
10
|
flex-shrink: 0;
|
11
11
|
box-shadow: 0 0 0 1px var(--color-avatar-border);
|
12
12
|
}
|
@@ -27,7 +27,7 @@
|
|
27
27
|
.avatar-1,
|
28
28
|
.avatar-2,
|
29
29
|
.avatar-small {
|
30
|
-
border-radius: var(--
|
30
|
+
border-radius: var(--borderRadius-small, 4px);
|
31
31
|
}
|
32
32
|
|
33
33
|
/* Sizes */
|
@@ -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(--
|
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 +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,
|
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"]}
|
@@ -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(--
|
39
|
-
border-radius: var(--
|
38
|
+
border-right: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
|
39
|
+
border-radius: var(--borderRadius-small, 4px);
|
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(--
|
53
|
+
border-radius: var(--borderRadius-small, 4px);
|
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(--
|
91
|
+
outline: var(--borderWidth-thin, 1px) 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(--
|
139
|
+
border-left: var(--borderWidth-thin, 1px) solid var(--color-canvas-default);
|
140
140
|
}
|
141
141
|
}
|
@@ -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(--
|
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 +1 @@
|
|
1
|
-
{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,YAEE,gCAAkC,CADlC,iBAAkB,CAElB,iBAkBF,CAhBE,cACE,2BACF,CAEA,iBAGE,sCAAuC,CACvC,
|
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"]}
|
@@ -11,10 +11,10 @@
|
|
11
11
|
|
12
12
|
& code {
|
13
13
|
padding: 2px 5px 3px;
|
14
|
-
font-size: var(--
|
14
|
+
font-size: var(--text-body-size-medium, 14px);
|
15
15
|
background: var(--color-canvas-default);
|
16
|
-
border: var(--
|
17
|
-
border-radius: var(--
|
16
|
+
border: var(--borderWidth-thin, 1px) solid var(--color-border-muted);
|
17
|
+
border-radius: var(--borderRadius-medium, 6px);
|
18
18
|
}
|
19
19
|
|
20
20
|
& img {
|
@@ -24,14 +24,14 @@
|
|
24
24
|
}
|
25
25
|
|
26
26
|
.blankslate-icon {
|
27
|
-
margin-right: var(--
|
28
|
-
margin-bottom: var(--
|
29
|
-
margin-left: var(--
|
27
|
+
margin-right: var(--control-small-gap, 4px);
|
28
|
+
margin-bottom: var(--stack-gap-condensed, 8px);
|
29
|
+
margin-left: var(--control-small-gap, 4px);
|
30
30
|
color: var(--color-fg-muted);
|
31
31
|
}
|
32
32
|
|
33
33
|
.blankslate-image {
|
34
|
-
margin-bottom: var(--
|
34
|
+
margin-bottom: var(--stack-gap-normal, 16px);
|
35
35
|
}
|
36
36
|
|
37
37
|
.blankslate-heading {
|
@@ -39,19 +39,19 @@
|
|
39
39
|
}
|
40
40
|
|
41
41
|
.blankslate-action {
|
42
|
-
margin-top: var(--
|
42
|
+
margin-top: var(--stack-gap-normal, 16px);
|
43
43
|
|
44
44
|
&:first-of-type {
|
45
|
-
margin-top: var(--
|
45
|
+
margin-top: var(--stack-gap-spacious, 24px);
|
46
46
|
}
|
47
47
|
|
48
48
|
&:last-of-type {
|
49
|
-
margin-bottom: var(--
|
49
|
+
margin-bottom: var(--stack-gap-condensed, 8px);
|
50
50
|
}
|
51
51
|
}
|
52
52
|
|
53
53
|
.blankslate-capped {
|
54
|
-
border-radius: 0 0 var(--
|
54
|
+
border-radius: 0 0 var(--borderRadius-medium, 6px) var(--borderRadius-medium, 6px);
|
55
55
|
}
|
56
56
|
|
57
57
|
.blankslate-spacious {
|
@@ -72,14 +72,14 @@
|
|
72
72
|
}
|
73
73
|
|
74
74
|
& h3 {
|
75
|
-
margin: var(--
|
75
|
+
margin: var(--stack-gap-normal, 16px) 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(--
|
82
|
+
font-size: var(--text-body-size-large, 16px);
|
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(--
|
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)}
|
@@ -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-btn-octicon.btn-octicon",
|
15
14
|
".Box--spacious .Box-footer",
|
15
|
+
".Box--spacious .Box-btn-octicon.btn-octicon",
|
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,
|
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"]}
|