playbook_ui 7.14.0.pre.alpha1 → 7.14.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (156) hide show
  1. checksums.yaml +4 -4
  2. data/app/helpers/playbook/pb_sample_helper.rb +1 -1
  3. data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +3 -0
  4. data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +12 -0
  5. data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +0 -1
  8. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +10 -36
  9. data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +20 -26
  10. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +0 -5
  11. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_custom.jsx +1 -0
  12. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +0 -2
  13. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -1
  14. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.html.erb +1 -0
  15. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_dark.jsx +15 -0
  16. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
  17. data/app/pb_kits/playbook/pb_date_range_stacked/docs/index.js +1 -0
  18. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.html.erb +5 -0
  19. data/app/pb_kits/playbook/pb_date_stacked/docs/_date_stacked_dark.jsx +26 -0
  20. data/app/pb_kits/playbook/pb_date_stacked/docs/example.yml +7 -0
  21. data/app/pb_kits/playbook/pb_date_stacked/docs/index.js +2 -0
  22. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.html.erb +1 -0
  23. data/app/pb_kits/playbook/pb_date_time_stacked/docs/_date_time_stacked_dark.jsx +14 -0
  24. data/app/pb_kits/playbook/pb_date_time_stacked/docs/example.yml +4 -0
  25. data/app/pb_kits/playbook/pb_date_time_stacked/docs/index.js +1 -0
  26. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.html.erb +5 -0
  27. data/app/pb_kits/playbook/pb_date_year_stacked/docs/_date_year_stacked_dark.jsx +28 -0
  28. data/app/pb_kits/playbook/pb_date_year_stacked/docs/example.yml +2 -0
  29. data/app/pb_kits/playbook/pb_date_year_stacked/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx +4 -9
  31. data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss +7 -12
  32. data/app/pb_kits/playbook/pb_distribution_bar/distribution_bar.rb +1 -4
  33. data/app/pb_kits/playbook/pb_distribution_bar/docs/example.yml +0 -2
  34. data/app/pb_kits/playbook/pb_distribution_bar/docs/index.js +0 -1
  35. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +1 -12
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +0 -41
  37. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +37 -84
  38. data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +7 -18
  39. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.html.erb +21 -0
  40. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_dark.jsx +43 -0
  41. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.html.erb +5 -0
  42. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_dark.jsx +17 -0
  43. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml +5 -0
  44. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +2 -0
  45. data/app/pb_kits/playbook/pb_flex/_flex.jsx +9 -25
  46. data/app/pb_kits/playbook/pb_flex/_flex.scss +7 -40
  47. data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +2 -6
  48. data/app/pb_kits/playbook/pb_flex/_flex_item.scss +0 -10
  49. data/app/pb_kits/playbook/pb_flex/docs/_description.md +0 -6
  50. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.html.erb +15 -15
  51. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.jsx +15 -17
  52. data/app/pb_kits/playbook/pb_flex/docs/_flex_default.md +1 -3
  53. data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.html.erb → _flex_horizontal.html.erb} +21 -19
  54. data/app/pb_kits/playbook/pb_flex/docs/{_flex_align.jsx → _flex_horizontal.jsx} +77 -71
  55. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.html.erb +8 -8
  56. data/app/pb_kits/playbook/pb_flex/docs/_flex_inline.md +1 -5
  57. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.html.erb +9 -9
  58. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.jsx +2 -2
  59. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.html.erb +8 -23
  60. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.jsx +4 -4
  61. data/app/pb_kits/playbook/pb_flex/docs/_flex_vertical.html.erb +68 -0
  62. data/app/pb_kits/playbook/pb_flex/docs/{_flex_justify.jsx → _flex_vertical.jsx} +99 -41
  63. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.jsx +1 -1
  64. data/app/pb_kits/playbook/pb_flex/docs/example.yml +4 -9
  65. data/app/pb_kits/playbook/pb_flex/docs/index.js +2 -4
  66. data/app/pb_kits/playbook/pb_flex/flex.rb +12 -79
  67. data/app/pb_kits/playbook/pb_flex/flex_item.rb +1 -18
  68. data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +1 -7
  69. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.html.erb +3 -0
  70. data/app/pb_kits/playbook/pb_icon/docs/_icon_default_dark.jsx +18 -0
  71. data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -1
  72. data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
  73. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.html.erb +42 -0
  74. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_dark.jsx +66 -0
  75. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.html.erb +4 -0
  76. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_dark.jsx +17 -0
  77. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.html.erb +29 -0
  78. data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_dark.jsx +38 -0
  79. data/app/pb_kits/playbook/pb_icon_circle/docs/example.yml +7 -0
  80. data/app/pb_kits/playbook/pb_icon_circle/docs/index.js +3 -0
  81. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.html.erb +23 -0
  82. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_align_dark.jsx +37 -0
  83. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.html.erb +21 -0
  84. data/app/pb_kits/playbook/pb_icon_value/docs/_icon_value_dark.jsx +35 -0
  85. data/app/pb_kits/playbook/pb_icon_value/docs/example.yml +5 -0
  86. data/app/pb_kits/playbook/pb_icon_value/docs/index.js +2 -0
  87. data/app/pb_kits/playbook/pb_layout/_layout.scss +9 -9
  88. data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.html.erb +32 -0
  89. data/app/pb_kits/playbook/pb_layout/docs/_layout_sizes_dark.jsx +97 -0
  90. data/app/pb_kits/playbook/pb_layout/docs/example.yml +4 -0
  91. data/app/pb_kits/playbook/pb_layout/docs/index.js +1 -0
  92. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.html.erb +43 -0
  93. data/app/pb_kits/playbook/pb_popover/docs/_popover_close_dark.jsx +105 -0
  94. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.html.erb +25 -0
  95. data/app/pb_kits/playbook/pb_popover/docs/_popover_dark.jsx +51 -0
  96. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.html.erb +13 -0
  97. data/app/pb_kits/playbook/pb_popover/docs/_popover_list_dark.jsx +54 -0
  98. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.html.erb +25 -0
  99. data/app/pb_kits/playbook/pb_popover/docs/_popover_scroll_height_dark.jsx +57 -0
  100. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.html.erb +14 -0
  101. data/app/pb_kits/playbook/pb_popover/docs/_popover_z_index_dark.jsx +54 -0
  102. data/app/pb_kits/playbook/pb_popover/docs/example.yml +13 -0
  103. data/app/pb_kits/playbook/pb_popover/docs/index.js +5 -0
  104. data/app/pb_kits/playbook/pb_select/_select.scss +4 -6
  105. data/app/pb_kits/playbook/pb_table/_table.jsx +0 -8
  106. data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.html.erb +4 -56
  107. data/app/pb_kits/playbook/pb_table/docs/_table_responsive_table.jsx +3 -64
  108. data/app/pb_kits/playbook/pb_table/styles/_all.scss +0 -3
  109. data/app/pb_kits/playbook/pb_table/table.rb +1 -8
  110. data/app/pb_kits/playbook/pb_timestamp/_timestamp.html.erb +4 -6
  111. data/app/pb_kits/playbook/pb_timestamp/_timestamp.jsx +16 -92
  112. data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss +1 -12
  113. data/app/pb_kits/playbook/pb_timestamp/docs/_description.md +1 -1
  114. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_align.jsx +18 -26
  115. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.html.erb +1 -21
  116. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_default.jsx +8 -40
  117. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed.jsx +4 -12
  118. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.html.erb +54 -0
  119. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_elapsed_align.jsx +73 -0
  120. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones.jsx +18 -26
  121. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.html.erb +177 -0
  122. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_timezones_align.jsx +209 -0
  123. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.html.erb +21 -0
  124. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated.jsx +28 -6
  125. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.html.erb +123 -0
  126. data/app/pb_kits/playbook/pb_timestamp/docs/_timestamp_updated_align.jsx +146 -0
  127. data/app/pb_kits/playbook/pb_timestamp/docs/example.yml +0 -8
  128. data/app/pb_kits/playbook/pb_timestamp/docs/index.js +0 -4
  129. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +1 -83
  130. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.jsx +4 -2
  131. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.html.erb +21 -0
  132. data/app/pb_kits/playbook/pb_user_badge/docs/_user_badge_size_dark.jsx +36 -0
  133. data/app/pb_kits/playbook/pb_user_badge/docs/index.js +1 -0
  134. data/lib/playbook/version.rb +1 -1
  135. metadata +57 -31
  136. data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +0 -51
  137. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +0 -77
  138. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.jsx +0 -78
  139. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.html.erb +0 -4
  140. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.jsx +0 -18
  141. data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md +0 -1
  142. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.html.erb +0 -101
  143. data/app/pb_kits/playbook/pb_flex/docs/_flex_align.md +0 -7
  144. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.html.erb +0 -33
  145. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.jsx +0 -75
  146. data/app/pb_kits/playbook/pb_flex/docs/_flex_gap.md +0 -9
  147. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.html.erb +0 -49
  148. data/app/pb_kits/playbook/pb_flex/docs/_flex_item.md +0 -11
  149. data/app/pb_kits/playbook/pb_flex/docs/_flex_item_example.jsx +0 -113
  150. data/app/pb_kits/playbook/pb_flex/docs/_flex_justify.md +0 -7
  151. data/app/pb_kits/playbook/pb_flex/docs/_flex_reverse.md +0 -5
  152. data/app/pb_kits/playbook/pb_flex/docs/_flex_spacing.md +0 -7
  153. data/app/pb_kits/playbook/pb_flex/docs/_flex_wrap.md +0 -5
  154. data/app/pb_kits/playbook/pb_table/styles/_desktop_collapse.scss +0 -135
  155. data/app/pb_kits/playbook/pb_table/styles/_mobile_collapse.scss +0 -135
  156. data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss +0 -135
@@ -0,0 +1,38 @@
1
+ import React from 'react'
2
+ import { IconCircle } from '../..'
3
+
4
+ const IconCircleSizesDark = (props) => {
5
+ return (
6
+ <div>
7
+ <IconCircle
8
+ dark
9
+ icon="rocket"
10
+ size="sm"
11
+ {...props}
12
+ />
13
+ <br />
14
+ <IconCircle
15
+ dark
16
+ icon="rocket"
17
+ size="md"
18
+ {...props}
19
+ />
20
+ <br />
21
+ <IconCircle
22
+ dark
23
+ icon="rocket"
24
+ size="lg"
25
+ {...props}
26
+ />
27
+ <br />
28
+ <IconCircle
29
+ dark
30
+ icon="rocket"
31
+ size="xl"
32
+ {...props}
33
+ />
34
+ </div>
35
+ )
36
+ }
37
+
38
+ export default IconCircleSizesDark
@@ -4,8 +4,15 @@ examples:
4
4
  - icon_circle_default: Default
5
5
  - icon_circle_sizes: Size
6
6
  - icon_circle_color: Color
7
+ - icon_circle_dark: Dark
8
+ - icon_circle_sizes_dark: Dark Size
9
+ - icon_circle_color_dark: Dark Color
10
+
7
11
 
8
12
  react:
9
13
  - icon_circle_default: Default
10
14
  - icon_circle_sizes: Size
11
15
  - icon_circle_color: Color
16
+ - icon_circle_dark: Dark
17
+ - icon_circle_sizes_dark: Dark Size
18
+ - icon_circle_color_dark: Dark Color
@@ -1,3 +1,6 @@
1
1
  export { default as IconCircleColor } from './_icon_circle_color.jsx'
2
2
  export { default as IconCircleDefault } from './_icon_circle_default.jsx'
3
3
  export { default as IconCircleSizes } from './_icon_circle_sizes.jsx'
4
+ export { default as IconCircleDark } from './_icon_circle_dark.jsx'
5
+ export { default as IconCircleColorDark } from './_icon_circle_color_dark.jsx'
6
+ export { default as IconCircleSizesDark } from './_icon_circle_sizes_dark.jsx'
@@ -0,0 +1,23 @@
1
+ <%= pb_rails("icon_value", props: {
2
+ dark: true,
3
+ icon: "heart",
4
+ text: "93"
5
+ }) %>
6
+
7
+ <br>
8
+
9
+ <%= pb_rails("icon_value", props: {
10
+ dark: true,
11
+ icon: "comment",
12
+ text: "5",
13
+ align: "center"
14
+ }) %>
15
+
16
+ <br>
17
+
18
+ <%= pb_rails("icon_value", props: {
19
+ dark: true,
20
+ icon: "clock",
21
+ text: "15m",
22
+ align: "right"
23
+ }) %>
@@ -0,0 +1,37 @@
1
+ import React from 'react'
2
+ import { IconValue } from '../../'
3
+
4
+ const IconValueAlignDark = (props) => {
5
+ return (
6
+ <div>
7
+ <IconValue
8
+ dark
9
+ icon="heart"
10
+ text="93"
11
+ {...props}
12
+ />
13
+
14
+ <br />
15
+
16
+ <IconValue
17
+ align="center"
18
+ dark
19
+ icon="comment"
20
+ text="5"
21
+ {...props}
22
+ />
23
+
24
+ <br />
25
+
26
+ <IconValue
27
+ align="right"
28
+ dark
29
+ icon="clock"
30
+ text="15min"
31
+ {...props}
32
+ />
33
+ </div>
34
+ )
35
+ }
36
+
37
+ export default IconValueAlignDark
@@ -0,0 +1,21 @@
1
+ <%= pb_rails("icon_value", props: {
2
+ dark: true,
3
+ icon: "heart",
4
+ text: "93"
5
+ }) %>
6
+
7
+ <br>
8
+
9
+ <%= pb_rails("icon_value", props: {
10
+ dark: true,
11
+ icon: "comment",
12
+ text: "5"
13
+ }) %>
14
+
15
+ <br>
16
+
17
+ <%= pb_rails("icon_value", props: {
18
+ dark: true,
19
+ icon: "clock",
20
+ text: "15m"
21
+ }) %>
@@ -0,0 +1,35 @@
1
+ import React from 'react'
2
+ import { IconValue } from '../../'
3
+
4
+ const IconValueDark = (props) => {
5
+ return (
6
+ <div>
7
+ <IconValue
8
+ dark
9
+ icon="clipboard"
10
+ text="33-123456"
11
+ {...props}
12
+ />
13
+
14
+ <br />
15
+
16
+ <IconValue
17
+ dark
18
+ icon="heart"
19
+ text="93"
20
+ {...props}
21
+ />
22
+
23
+ <br />
24
+
25
+ <IconValue
26
+ dark
27
+ icon="clock"
28
+ text="15min"
29
+ {...props}
30
+ />
31
+ </div>
32
+ )
33
+ }
34
+
35
+ export default IconValueDark
@@ -3,7 +3,12 @@ examples:
3
3
  rails:
4
4
  - icon_value_default: Default
5
5
  - icon_value_align: Align
6
+ - icon_value_dark: Dark
7
+ - icon_value_align_dark: Align Dark
8
+
6
9
 
7
10
  react:
8
11
  - icon_value_default: Default
9
12
  - icon_value_align: Align
13
+ - icon_value_dark: Dark
14
+ - icon_value_align_dark: Align Dark
@@ -1,2 +1,4 @@
1
1
  export { default as IconValueDefault } from './_icon_value_default.jsx'
2
2
  export { default as IconValueAlign } from './_icon_value_align.jsx'
3
+ export { default as IconValueDark } from './_icon_value_dark.jsx'
4
+ export { default as IconValueAlignDark } from './_icon_value_align_dark.jsx'
@@ -21,14 +21,14 @@ $card-border-radius: $border_rad_lightest;
21
21
  grid-column-gap: $space_sm;
22
22
  grid-row-gap: $space_sm;
23
23
  grid-template-columns: repeat(4, 1fr);
24
-
24
+
25
25
  @media screen and (max-width: $screen-md-min) {
26
26
  grid-template-columns: repeat(2, 1fr);
27
27
  }
28
28
  @media screen and (max-width: $screen-xs-min) {
29
29
  grid-template-columns: repeat(1, 1fr);
30
30
  }
31
- }
31
+ }
32
32
  }
33
33
 
34
34
  &[class*=_collection_detail]{
@@ -36,13 +36,13 @@ $card-border-radius: $border_rad_lightest;
36
36
  width: 100%;
37
37
  height: 100%;
38
38
  padding: $space_lg;
39
- grid-template-areas:
39
+ grid-template-areas:
40
40
  "side-bar collection";
41
41
  grid-template-columns: .25fr 1fr;
42
42
  grid-column-gap: $space_sm;
43
43
  div.layout_body{
44
44
  @media screen and (min-width: $screen-md-min) {
45
- margin-left: $space_md;
45
+ margin-left: $space_md;
46
46
  }
47
47
  @media screen and (max-width: $screen-lg-min) {
48
48
  grid-template-columns: repeat(3, 1fr);
@@ -61,7 +61,7 @@ $card-border-radius: $border_rad_lightest;
61
61
  grid-template-columns: 1fr;
62
62
  grid-row-gap: $space_sm;
63
63
  }
64
-
64
+
65
65
  }
66
66
 
67
67
  &[class*=_kanban]{
@@ -76,7 +76,7 @@ $card-border-radius: $border_rad_lightest;
76
76
  content: '';
77
77
  flex: 0 0 $gap;
78
78
  }
79
-
79
+
80
80
  div.layout_body{
81
81
  width: $list-width;
82
82
  height: 100vh;
@@ -135,7 +135,7 @@ $card-border-radius: $border_rad_lightest;
135
135
  width: 100%;
136
136
  }
137
137
  }
138
-
138
+
139
139
 
140
140
  &[class*=_sidebar]{
141
141
  $layout_sizes: (
@@ -188,7 +188,7 @@ $card-border-radius: $border_rad_lightest;
188
188
  // Collapse Settings
189
189
  @each $position in $positions {
190
190
  @each $breakpoint_name, $breakpoint in $breakpoints {
191
- &[class*=_#{$position}_collapse_#{$breakpoint_name}] {
191
+ &_#{$position}_collapse_#{$breakpoint_name} {
192
192
  @include break_at($breakpoint) {
193
193
  @if $position == 'left' {
194
194
  grid-template-areas: "layout_collapsed_#{$breakpoint_name}_sidebar" "layout_collapsed_#{$breakpoint_name}_body";
@@ -198,7 +198,7 @@ $card-border-radius: $border_rad_lightest;
198
198
  grid-template-areas: "layout_collapsed_#{$breakpoint_name}_body" "layout_collapsed_#{$breakpoint_name}_sidebar";
199
199
  grid-template-rows: 1fr auto;
200
200
  }
201
- grid-template-columns: 1fr !important;
201
+ grid-template-columns: 1fr;
202
202
  &.full {
203
203
  min-height: auto !important;
204
204
  }
@@ -0,0 +1,32 @@
1
+ <%= pb_rails("layout", props: {position: "left", size: "xs", collapse: "xs", variant: "dark"}) do %>
2
+ <%= pb_rails("layout/sidebar") do %> Side <% end %>
3
+ <%= pb_rails("layout/body") do %> Body <% end %>
4
+ <% end %>
5
+
6
+ <br/><br/>
7
+
8
+ <%= pb_rails("layout", props: {position: "left", size: "sm", collapse: "sm", variant: "dark"}) do %>
9
+ <%= pb_rails("layout/sidebar") do %> Side <% end %>
10
+ <%= pb_rails("layout/body") do %> Body <% end %>
11
+ <% end %>
12
+
13
+ <br/><br/>
14
+
15
+ <%= pb_rails("layout", props: {position: "left", size: "md", collapse: "sm", variant: "dark"}) do %>
16
+ <%= pb_rails("layout/sidebar") do %> Side <% end %>
17
+ <%= pb_rails("layout/body") do %> Body <% end %>
18
+ <% end %>
19
+
20
+ <br/><br/>
21
+
22
+ <%= pb_rails("layout", props: {position: "left", size: "lg", collapse: "sm", variant: "dark"}) do %>
23
+ <%= pb_rails("layout/sidebar") do %> Side <% end %>
24
+ <%= pb_rails("layout/body") do %> Body <% end %>
25
+ <% end %>
26
+
27
+ <br/><br/>
28
+
29
+ <%= pb_rails("layout", props: {position: "left", size: "xl", collapse: "sm", variant: "dark"}) do %>
30
+ <%= pb_rails("layout/sidebar") do %> Side <% end %>
31
+ <%= pb_rails("layout/body") do %> Body <% end %>
32
+ <% end %>
@@ -0,0 +1,97 @@
1
+ import React from 'react'
2
+ import { Layout } from '../../'
3
+
4
+ const LayoutSizesDark = (props) => {
5
+ return (
6
+ <div>
7
+ <Layout
8
+ collapse="xs"
9
+ position="left"
10
+ size="xs"
11
+ variant="dark"
12
+ {...props}
13
+ >
14
+ <Layout.Side>
15
+ {'Side'}
16
+ </Layout.Side>
17
+ <Layout.Body>
18
+ {'Body'}
19
+ </Layout.Body>
20
+ </Layout>
21
+
22
+ <br />
23
+ <br />
24
+
25
+ <Layout
26
+ collapse="xs"
27
+ position="left"
28
+ size="sm"
29
+ variant="dark"
30
+ {...props}
31
+ >
32
+ <Layout.Side>
33
+ {'Side'}
34
+ </Layout.Side>
35
+ <Layout.Body>
36
+ {'Body'}
37
+ </Layout.Body>
38
+ </Layout>
39
+
40
+ <br />
41
+ <br />
42
+
43
+ <Layout
44
+ collapse="xs"
45
+ position="left"
46
+ size="md"
47
+ variant="dark"
48
+ {...props}
49
+ >
50
+ <Layout.Side>
51
+ {'Side'}
52
+ </Layout.Side>
53
+ <Layout.Body>
54
+ {'Body'}
55
+ </Layout.Body>
56
+ </Layout>
57
+
58
+ <br />
59
+ <br />
60
+
61
+ <Layout
62
+ collapse="xs"
63
+ position="left"
64
+ size="lg"
65
+ variant="dark"
66
+ {...props}
67
+ >
68
+ <Layout.Side>
69
+ {'Side'}
70
+ </Layout.Side>
71
+ <Layout.Body>
72
+ {'Body'}
73
+ </Layout.Body>
74
+ </Layout>
75
+
76
+ <br />
77
+ <br />
78
+
79
+ <Layout
80
+ collapse="xs"
81
+ position="left"
82
+ size="xl"
83
+ variant="dark"
84
+ {...props}
85
+ >
86
+ <Layout.Side>
87
+ {'Side'}
88
+ </Layout.Side>
89
+ <Layout.Body>
90
+ {'Body'}
91
+ </Layout.Body>
92
+ </Layout>
93
+ </div>
94
+ )
95
+ }
96
+
97
+ export default LayoutSizesDark
@@ -3,16 +3,20 @@ examples:
3
3
  - layout_colors: Colors
4
4
  - layout_transparent: Transparent
5
5
  - layout_sizes: Sizes
6
+ - layout_sizes_dark: Sizes Dark
6
7
  - layout_collection: Collection Layout
7
8
  - layout_collection_detail: Collection Detail Layout
8
9
  - layout_kanban: Kanban Layout
9
10
  - layout_content: Content Layout
10
11
 
12
+
11
13
  react:
12
14
  - layout_colors: Colors
13
15
  - layout_transparent: Transparent
14
16
  - layout_sizes: Sizes
17
+ - layout_sizes_dark: Sizes Dark
15
18
  - layout_collection: Collection Layout
16
19
  - layout_collection_detail: Collection Detail Layout
17
20
  - layout_kanban: Kanban Layout
18
21
  - layout_content: Content Layout
22
+
@@ -1,6 +1,7 @@
1
1
  export { default as LayoutColors } from './_layout_colors.jsx'
2
2
  export { default as LayoutTransparent } from './_layout_transparent.jsx'
3
3
  export { default as LayoutSizes } from './_layout_sizes.jsx'
4
+ export { default as LayoutSizesDark } from './_layout_sizes_dark.jsx'
4
5
  export { default as LayoutCollection } from './_layout_collection.jsx'
5
6
  export { default as LayoutKanban } from './_layout_kanban.jsx'
6
7
  export { default as LayoutKanbanResponsive } from './_layout_kanban_responsive.jsx'