fleetio_spark 0.2.48 → 1.0.0.rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (189) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/javascripts/spark/_icons.js +1 -1
  3. data/app/assets/javascripts/spark/components/app/sidebar/_fix.js +4 -4
  4. data/app/assets/javascripts/spark/components/app/sidebar/_toggle.js +1 -1
  5. data/app/assets/javascripts/spark/components/layout/_auto-grid.js +5 -5
  6. data/app/assets/javascripts/spark/components/nav/_toggle.js +16 -7
  7. data/app/assets/javascripts/spark/components/ui/_sticky_panel.js +2 -2
  8. data/app/assets/javascripts/spark/components/ui/_toast.js +3 -6
  9. data/app/assets/javascripts/spark/shims/_dataset.js +241 -0
  10. data/app/assets/javascripts/spark/spark.js +18 -16
  11. data/app/assets/stylesheets/spark/_index.scss +0 -1
  12. data/app/assets/stylesheets/spark/components/_index.scss +11 -5
  13. data/app/assets/stylesheets/spark/components/app/_header.scss +15 -28
  14. data/app/assets/stylesheets/spark/components/app/_layout.scss +2 -2
  15. data/app/assets/stylesheets/spark/components/app/_sidebar.scss +19 -47
  16. data/app/assets/stylesheets/spark/components/app/sidebar/_header.scss +44 -48
  17. data/app/assets/stylesheets/spark/components/app/sidebar/_toggle.scss +5 -2
  18. data/app/assets/stylesheets/spark/components/button/_button.scss +48 -53
  19. data/app/assets/stylesheets/spark/components/button/_button_group.scss +10 -16
  20. data/app/assets/stylesheets/spark/components/button/_size.scss +17 -8
  21. data/app/assets/stylesheets/spark/components/icon/_badge.scss +41 -0
  22. data/app/assets/stylesheets/spark/{_icons.scss → components/icon/_icon.scss} +0 -0
  23. data/app/assets/stylesheets/spark/components/{form → input}/_switch.scss +20 -20
  24. data/app/assets/stylesheets/spark/components/layout/_block.scss +44 -0
  25. data/app/assets/stylesheets/spark/components/layout/_grid.scss +26 -29
  26. data/app/assets/stylesheets/spark/components/layout/_media_block.scss +76 -0
  27. data/app/assets/stylesheets/spark/components/layout/_page.scss +54 -0
  28. data/app/assets/stylesheets/spark/components/{app → messaging}/_banner.scss +3 -3
  29. data/app/assets/stylesheets/spark/components/messaging/_trial-notice.scss +20 -0
  30. data/app/assets/stylesheets/spark/components/nav/_item.scss +6 -30
  31. data/app/assets/stylesheets/spark/components/nav/_sidebar.scss +11 -48
  32. data/app/assets/stylesheets/spark/components/nav/_tabs.scss +5 -5
  33. data/app/assets/stylesheets/spark/components/nav/sidebar/_theme-default.scss +59 -0
  34. data/app/assets/stylesheets/spark/components/nav/sidebar/_theme-primary.scss +69 -0
  35. data/app/assets/stylesheets/spark/components/nav/tree/_group.scss +1 -6
  36. data/app/assets/stylesheets/spark/components/ui/_card.scss +57 -0
  37. data/app/assets/stylesheets/spark/components/ui/_header.scss +55 -55
  38. data/app/assets/stylesheets/spark/components/ui/_placeholder.scss +8 -22
  39. data/app/assets/stylesheets/spark/components/ui/_toolbar.scss +1 -27
  40. data/app/assets/stylesheets/spark/components_old/_dropdown.scss +117 -114
  41. data/app/assets/stylesheets/spark/components_old/_index.scss +1 -1
  42. data/app/assets/stylesheets/spark/components_old/header/_index.scss +0 -1
  43. data/app/assets/stylesheets/spark/components_old/header/_search.scss +2 -0
  44. data/app/assets/stylesheets/spark/core/_vars.scss +6 -3
  45. data/app/components/spark/badge.html.slim +4 -0
  46. data/app/components/spark/badge.rb +15 -0
  47. data/app/components/spark/banner.html.slim +7 -0
  48. data/app/components/spark/banner.rb +28 -0
  49. data/app/components/spark/button.html.slim +9 -0
  50. data/app/components/spark/button.rb +68 -0
  51. data/app/components/spark/button/group.html.slim +4 -0
  52. data/app/components/spark/button/group.rb +22 -0
  53. data/app/components/spark/card.html.slim +7 -0
  54. data/app/components/spark/card.rb +13 -0
  55. data/app/components/spark/checklist.html.slim +14 -0
  56. data/app/components/spark/checklist.rb +49 -0
  57. data/app/components/spark/checklist/container.html.slim +14 -0
  58. data/app/components/spark/checklist/container.rb +51 -0
  59. data/app/components/spark/checklist/item.html.slim +9 -0
  60. data/app/components/spark/checklist/item.rb +24 -0
  61. data/app/components/spark/checklist/trigger.html.slim +6 -0
  62. data/app/components/spark/checklist/trigger.rb +13 -0
  63. data/app/components/spark/component/base.rb +27 -0
  64. data/app/components/spark/embed/wistia_media.html.slim +11 -0
  65. data/app/components/spark/embed/wistia_media.rb +22 -0
  66. data/app/components/spark/embed/wistia_media_component.rb +22 -36
  67. data/app/components/spark/grid.html.slim +4 -0
  68. data/app/components/spark/grid.rb +31 -0
  69. data/app/components/spark/grid/column.html.slim +1 -0
  70. data/app/components/spark/grid/column.rb +34 -0
  71. data/app/components/spark/icon.html.slim +1 -0
  72. data/app/components/spark/icon.rb +34 -0
  73. data/app/components/spark/icon/placeholder.html.slim +20 -0
  74. data/app/components/spark/icon/placeholder.rb +139 -0
  75. data/app/components/spark/input/base.html.slim +1 -0
  76. data/app/components/spark/input/base.rb +17 -0
  77. data/app/components/spark/input/checkbox.html.slim +2 -0
  78. data/app/components/spark/input/checkbox.rb +14 -0
  79. data/app/components/spark/input/label.html.slim +4 -0
  80. data/app/components/spark/input/label.rb +13 -0
  81. data/app/components/spark/input/switch.html.slim +5 -0
  82. data/app/components/spark/input/switch.rb +24 -0
  83. data/app/components/spark/layout/block.html.slim +13 -0
  84. data/app/components/spark/layout/block.rb +62 -0
  85. data/app/components/spark/layout/media_block.html.slim +11 -0
  86. data/app/components/spark/layout/media_block.rb +29 -0
  87. data/app/components/spark/layout/page.html.slim +15 -0
  88. data/app/components/spark/layout/page.rb +37 -0
  89. data/app/components/spark/nav/group.html.slim +5 -0
  90. data/app/components/spark/nav/group.rb +31 -0
  91. data/app/components/spark/nav/item.html.slim +12 -0
  92. data/app/components/spark/nav/item.rb +36 -0
  93. data/app/components/spark/nav/sidebar.html.slim +14 -0
  94. data/app/components/spark/nav/sidebar.rb +60 -0
  95. data/app/components/spark/nav/tab_panels.html.slim +6 -0
  96. data/app/components/spark/nav/tab_panels.rb +42 -0
  97. data/app/components/spark/nav/tabs.html.slim +8 -0
  98. data/app/components/spark/nav/tabs.rb +36 -0
  99. data/app/components/spark/nav/toggle.html.slim +9 -0
  100. data/app/components/spark/nav/toggle.rb +20 -0
  101. data/app/components/spark/nav/tree.html.slim +9 -0
  102. data/app/components/spark/nav/tree.rb +53 -0
  103. data/app/components/spark/nav/tree/group.html.slim +9 -0
  104. data/app/components/spark/nav/tree/group.rb +26 -0
  105. data/app/components/spark/sticky_panel.html.slim +2 -0
  106. data/app/components/spark/sticky_panel.rb +12 -0
  107. data/app/components/spark/toolbar.html.slim +7 -0
  108. data/app/components/spark/toolbar.rb +14 -0
  109. data/app/components/spark/tooltip.html.slim +3 -0
  110. data/app/components/spark/tooltip.rb +13 -0
  111. data/app/components/spark/trial_notice.html.slim +3 -0
  112. data/app/components/spark/trial_notice.rb +35 -0
  113. data/app/components/spark/widget_card.html.slim +5 -0
  114. data/app/components/spark/widget_card.rb +12 -0
  115. data/app/helpers/spark/application_helper.rb +9 -0
  116. data/lib/fleetio_spark.rb +6 -6
  117. data/lib/fleetio_spark/version.rb +1 -1
  118. data/public/code-1.0.0.rc.1.js +2 -0
  119. data/public/code-1.0.0.rc.1.js.gz +0 -0
  120. data/public/code-1.0.0.rc.1.js.map +1 -0
  121. data/public/spark-1.0.0.rc.1.css +1 -0
  122. data/public/spark-1.0.0.rc.1.css.gz +0 -0
  123. data/public/spark-1.0.0.rc.1.js +2 -0
  124. data/public/spark-1.0.0.rc.1.js.gz +0 -0
  125. data/public/spark-1.0.0.rc.1.js.map +1 -0
  126. metadata +110 -75
  127. data/app/assets/stylesheets/spark/components/layout/_base.scss +0 -0
  128. data/app/assets/stylesheets/spark/components/layout/_header.scss +0 -55
  129. data/app/assets/stylesheets/spark/components/page/_header.scss +0 -9
  130. data/app/assets/stylesheets/spark/components/page/_main.scss +0 -62
  131. data/app/assets/stylesheets/spark/components_old/header/_trial-status.scss +0 -61
  132. data/app/components/spark/app/banner_component.rb +0 -32
  133. data/app/components/spark/app/content_component.rb +0 -32
  134. data/app/components/spark/app/header_component.rb +0 -59
  135. data/app/components/spark/app/layout_component.rb +0 -92
  136. data/app/components/spark/app/modal_component.rb +0 -5
  137. data/app/components/spark/app/sidebar/header_component.rb +0 -39
  138. data/app/components/spark/app/sidebar_component.rb +0 -20
  139. data/app/components/spark/button/add_component.rb +0 -9
  140. data/app/components/spark/button/base_component.rb +0 -39
  141. data/app/components/spark/button/cancel_component.rb +0 -8
  142. data/app/components/spark/button/danger_component.rb +0 -8
  143. data/app/components/spark/button/group_component.rb +0 -24
  144. data/app/components/spark/button/icon_component.rb +0 -14
  145. data/app/components/spark/button/primary_component.rb +0 -8
  146. data/app/components/spark/button/text_component.rb +0 -8
  147. data/app/components/spark/form/checkbox_component.rb +0 -16
  148. data/app/components/spark/form/input_component.rb +0 -9
  149. data/app/components/spark/form/label_component.rb +0 -12
  150. data/app/components/spark/form/switch_component.rb +0 -32
  151. data/app/components/spark/layout/base_component.rb +0 -2
  152. data/app/components/spark/layout/grid/column_component.rb +0 -32
  153. data/app/components/spark/layout/grid_component.rb +0 -37
  154. data/app/components/spark/layout/header_component.rb +0 -26
  155. data/app/components/spark/layout/page_component.rb +0 -31
  156. data/app/components/spark/nav/breadcrumbs_component.rb +0 -2
  157. data/app/components/spark/nav/group_component.rb +0 -36
  158. data/app/components/spark/nav/item_component.rb +0 -44
  159. data/app/components/spark/nav/pills_component.rb +0 -28
  160. data/app/components/spark/nav/sidebar_component.rb +0 -59
  161. data/app/components/spark/nav/tab_panels/panel_component.rb +0 -37
  162. data/app/components/spark/nav/tab_panels/tab_component.rb +0 -13
  163. data/app/components/spark/nav/tab_panels_component.rb +0 -28
  164. data/app/components/spark/nav/tabs_component.rb +0 -59
  165. data/app/components/spark/nav/toggle_component.rb +0 -28
  166. data/app/components/spark/nav/tree/group_component.rb +0 -35
  167. data/app/components/spark/nav/tree_component.rb +0 -56
  168. data/app/components/spark/page/layout_component.rb +0 -32
  169. data/app/components/spark/page/main_component.rb +0 -39
  170. data/app/components/spark/ui/card_component.rb +0 -16
  171. data/app/components/spark/ui/checklist/container_component.rb +0 -56
  172. data/app/components/spark/ui/checklist/item_component.rb +0 -37
  173. data/app/components/spark/ui/checklist_trigger_component.rb +0 -20
  174. data/app/components/spark/ui/icon/_icon.html.erb +0 -0
  175. data/app/components/spark/ui/icon_component.rb +0 -30
  176. data/app/components/spark/ui/placeholder_component.rb +0 -105
  177. data/app/components/spark/ui/sticky_panel_component.rb +0 -9
  178. data/app/components/spark/ui/toolbar_component.rb +0 -17
  179. data/app/components/spark/ui/tooltip_component.rb +0 -13
  180. data/app/components/spark/ui/widget_card_component.rb +0 -13
  181. data/lib/fleetio_spark/component.rb +0 -36
  182. data/public/code-0.2.48.js +0 -2
  183. data/public/code-0.2.48.js.gz +0 -0
  184. data/public/code-0.2.48.js.map +0 -1
  185. data/public/spark-0.2.48.css +0 -1
  186. data/public/spark-0.2.48.css.gz +0 -0
  187. data/public/spark-0.2.48.js +0 -2
  188. data/public/spark-0.2.48.js.gz +0 -0
  189. data/public/spark-0.2.48.js.map +0 -1
@@ -1,5 +1,4 @@
1
1
  // Design System Stylesheets index
2
- @import 'icons';
3
2
  @import 'core/index';
4
3
  @import 'form/index';
5
4
  @import 'components_old/index';
@@ -1,5 +1,4 @@
1
1
  @import "app/layout";
2
- @import "app/banner";
3
2
  @import "app/header";
4
3
  @import "app/sidebar";
5
4
  @import "app/modal";
@@ -10,10 +9,15 @@
10
9
  @import "button/button";
11
10
  @import "button/button_group";
12
11
 
13
- @import "form/switch";
12
+ @import "icon/icon";
13
+ @import "icon/badge";
14
+
15
+ @import "input/switch";
14
16
 
15
17
  @import "layout/grid";
16
- @import "layout/header";
18
+ @import "layout/block";
19
+ @import "layout/media_block";
20
+ @import "layout/page";
17
21
 
18
22
  @import "nav/item";
19
23
  @import "nav/tabs";
@@ -21,11 +25,13 @@
21
25
  @import "nav/tree";
22
26
  @import "nav/tree/group";
23
27
  @import "nav/sidebar";
28
+ @import "nav/sidebar/theme-primary";
29
+ @import "nav/sidebar/theme-default";
24
30
  @import "nav/breadcrumbs";
25
31
  @import "nav/toggle";
26
32
 
27
- @import "page/header";
28
- @import "page/main";
33
+ @import "messaging/trial-notice";
34
+ @import "messaging/banner";
29
35
 
30
36
  @import "ui/toast";
31
37
  @import "ui/toolbar";
@@ -1,4 +1,4 @@
1
- .app-header {
1
+ #header {
2
2
  display: flex;
3
3
  align-items: center;
4
4
  border-bottom: 1px solid $fl-gray-100;
@@ -6,13 +6,13 @@
6
6
  line-height: $base-line-height;
7
7
  padding: 0 $pad-lg;
8
8
  height: $app-header-height;
9
- //z-index: $z-app-header;
10
9
  position: absolute;
10
+ //z-index: $z-app-header;
11
11
 
12
12
  // When sidebar is present and visible
13
13
  // header should be the full width minus the sidebar width
14
14
  @include at-least($width-md) {
15
- .with-sidebar & {
15
+ #sidebar + .app-main & {
16
16
  width: calc(100% - #{$app-sidebar-width});
17
17
  }
18
18
  }
@@ -28,6 +28,7 @@
28
28
  + * {
29
29
  margin-top: $app-header-height;
30
30
  }
31
+
31
32
  // When search modal is active increase the
32
33
  // z-index so sidebar toggle is behind
33
34
  // the search input
@@ -36,37 +37,24 @@
36
37
  z-index: $z-app-search;
37
38
  }
38
39
  }
39
-
40
- .app-header-logo {
41
- display: flex;
42
- margin-right: $pad-lg;
43
-
44
- @include at-least($width-sm) {
45
- margin-right: $pad-xl;
46
- }
47
- }
48
40
  }
49
41
 
50
- .app-header-actions {
51
- display: flex;
52
- align-items: center;
53
- margin-left: auto;
54
-
55
- .modal-active + & {
56
- position: absolute;
57
- right: $pad-xl;
58
- z-index: -1;
59
- }
42
+ //.modal-active + #header {
43
+ //position: absolute;
44
+ //right: $pad-xl;
45
+ //z-index: -1;
46
+ //}
60
47
 
61
- > .dropdown {
62
- margin: 0 $pad-base;
48
+ #header {
49
+ .spark-header-action {
63
50
  @include until(500px) {
64
51
  position: static;
65
52
  }
53
+ }
66
54
 
67
- &:last-of-type {
68
- margin-right: 0;
69
- }
55
+ @include until($width-sm) {
56
+ // Hide on very small screens
57
+ .spark-trial-notice { display: none; }
70
58
  }
71
59
 
72
60
  .dropdown-menu {
@@ -166,4 +154,3 @@
166
154
  }
167
155
  }
168
156
  }
169
-
@@ -17,7 +17,7 @@ body {
17
17
 
18
18
  .app-wrapper,
19
19
  .app-main,
20
- .app-header,
20
+ #header,
21
21
  .app-content {
22
22
  width: 100%;
23
23
  }
@@ -88,7 +88,7 @@ body.test {
88
88
 
89
89
  @include at-least($width-md) {
90
90
  // On pages with a sidebar set app-main width to control overflow
91
- .with-sidebar .app-main {
91
+ #sidebar + .app-main {
92
92
  width: calc(100% - #{$app-sidebar-width});
93
93
  }
94
94
  }
@@ -1,10 +1,7 @@
1
- .app-sidebar {
1
+ #sidebar {
2
2
  @include font-smoothing;
3
3
  flex-direction: column;
4
4
  flex-shrink: 0;
5
- background-color: $app-sidebar-bg;
6
- font-size: $base-size;
7
- line-height: $base-line-height;
8
5
  width: $app-sidebar-width;
9
6
 
10
7
  // Expand width when wider viewport
@@ -23,56 +20,31 @@
23
20
  .nav-active & {
24
21
  height: auto;
25
22
  position: static;
26
- }
27
- }
28
23
 
29
- .nav-item {
30
- padding: ($pad-base + 1) 20px;
31
- color: rgba($fl-white, 0.8);
32
-
33
- &:hover,
34
- &:focus {
35
- color: $fl-white;
36
- //outline: none;
37
- background-color: $app-sidebar-item-hover;
38
- }
39
-
40
- &.active {
41
- color: $fl-white;
42
- background-color: $app-sidebar-item-active;
43
- }
44
- &-icon {
45
- &:first-child {
46
- margin-right: $pad-lg;
24
+ .spark-nav-sidebar-wrapper {
25
+ transition: none;
26
+ max-height: auto;
47
27
  }
48
28
  }
49
29
  }
50
30
 
51
- .spark-nav-group {
52
- .nav-item.active {
53
- &:before {
54
- content: "";
55
- position: absolute;
56
- display: block;
57
- z-index: 1;
58
- left: 26px;
59
- top: 10px;
60
- width: 6px;
61
- height: 6px;
62
- border-radius: 50%;
63
- background-color: $fl-blue-500;
64
- }
65
- }
31
+ .spark-nav-sidebar-footer ,
32
+ .spark-nav-sidebar-header {
33
+ position: absolute;
34
+ width: $app-sidebar-width;
35
+ z-index: $z-app-sidebar-header;
66
36
  }
67
37
 
68
- .nav-item-wrapper {
69
- &.active {
70
- color: $fl-white;
71
-
72
- &,
73
- .spark-nav-group {
74
- background-color: $app-sidebar-item-active;
75
- }
38
+ .spark-nav-sidebar-header {
39
+ top: 0;
40
+ + * {
41
+ margin-top: $app-header-height;
76
42
  }
77
43
  }
44
+
45
+ .spark-nav-sidebar-footer {
46
+ bottom: 0;
47
+ overflow: hidden;
48
+ background: adjust-color(rgba($app-sidebar-bg, .85), $lightness: -4%);
49
+ }
78
50
  }
@@ -1,25 +1,17 @@
1
- // Account & User Menu
2
- .app-sidebar-header {
3
- position: absolute;
4
- width: $app-sidebar-width;
5
- z-index: $z-app-sidebar-header;
6
-
7
- + * {
8
- margin-top: $app-header-height;
9
- }
1
+ // MediaBlock fleetio specific styles
2
+ .spark-nav-sidebar .sidebar-header {
3
+ &-link {
4
+ display: block;
5
+ margin: -10px -20px;
6
+ padding: 10px 20px 0;
7
+ height: $app-header-height - 1;
8
+ min-width: 0;
9
+ line-height: 1.4;
10
10
 
11
- > a {
12
- display: flex;
13
- flex: 1;
14
- align-items: center;
15
- color: $fl-white;
16
- height: $app-header-height;
17
- padding: 0 20px;
11
+ color: inherit;
18
12
  text-decoration: none;
19
13
  transition: background-color $duration $timing;
20
14
  background-color: $app-sidebar-item-hover;
21
- line-height: 1.4;
22
- border-bottom: 1px solid rgba(#000, .2);
23
15
 
24
16
  &:hover,
25
17
  &:focus {
@@ -32,7 +24,7 @@
32
24
  }
33
25
  }
34
26
 
35
- .dropdown-icon {
27
+ &-icon {
36
28
  margin-left: 4px;
37
29
  color: rgba($fl-white, 0.4);
38
30
  transition: color $duration $timing;
@@ -40,45 +32,49 @@
40
32
  top: .5em;
41
33
  }
42
34
 
43
- .details {
44
- display: flex;
45
- flex-wrap: wrap;
46
- margin-right: auto;
47
- line-height: 1.5;
48
- padding-right: $pad-base;
49
-
50
- &, * {
51
- white-space: nowrap;
52
- overflow: hidden;
53
- min-width: 0;
54
- text-overflow: ellipsis;
55
- }
35
+ &-account {
36
+ font-weight: 700;
37
+ color: $fl-white;
38
+ max-width: calc(100% - 1em);
39
+ }
56
40
 
57
- .account-name {
58
- font-weight: 700;
59
- max-width: calc(100% - 1em);
60
- }
41
+ &-contact {
42
+ font-size: 12px;
43
+ font-weight: 500;
44
+ }
45
+ }
61
46
 
62
- .user-name {
63
- font-size: 12px;
64
- opacity: .75;
65
- font-weight: 500;
66
- flex-basis: 100%;
67
- }
47
+ // Account & User Menu
48
+ .spark-nav-sidebar .spark-nav-sidebar-header {
49
+ position: absolute;
50
+ width: $app-sidebar-width;
51
+ z-index: $z-app-sidebar-header;
52
+
53
+ + * {
54
+ margin-top: $app-header-height;
68
55
  }
69
56
 
70
- .user-avatar img {
71
- max-width: none;
72
- vertical-align: middle;
73
- border-radius: 50%;
74
- width: 32px;
75
- height: 32px;
57
+ > a {
58
+ &:hover,
59
+ &:focus {
60
+ background-color: lighten($app-sidebar-item-hover, 1%);
61
+ }
76
62
  }
77
63
 
78
64
  // Styling for bootstrap dropdown until we replace with spark component
79
65
  .dropdown-menu {
80
66
  margin-top: -$pad-base;
81
67
  margin-left: $pad-lg;
68
+ color: $base-text-color;
69
+
70
+ .divider {
71
+ margin: $pad-base $pad-lg;
72
+
73
+ &.full-width {
74
+ margin-left: 0;
75
+ margin-right: 0;
76
+ }
77
+ }
82
78
 
83
79
  .user-name {
84
80
  padding: 0 $pad-lg;
@@ -1,11 +1,14 @@
1
1
  .app-sidebar-toggle {
2
2
  display: none;
3
3
  position: relative;
4
- margin-right: $pad-lg;
4
+ margin-right: $pad-base;
5
5
  margin-left: -6px;
6
6
  z-index: 11;
7
7
 
8
- .with-sidebar & { display: block; }
8
+ // Show sidebar toggle only when sidebar is present
9
+ #sidebar + .app-main & {
10
+ display: block;
11
+ }
9
12
 
10
13
  // Shade that covers the body
11
14
  &:after {
@@ -8,77 +8,72 @@ $button-colors: (
8
8
  blue: $fl-blue-700,
9
9
  green: $fl-green-600,
10
10
  yellow: $fl-yellow-600,
11
- red: $fl-red-600
11
+ red: $fl-red-600,
12
+ purple: $fl-purple-600
12
13
  );
13
14
 
14
- .spark-button-wrapper {
15
- // display: flex;
16
- // align-items: center;
17
- // justify-content: center;
15
+ .spark-button {
16
+ @include button-size($pad-md, $pad-md/2, 13px);
17
+ @include base-button-theme($fl-gray-200, $base-text-color);
18
+ border-radius: $radius-base;
19
+ cursor: pointer;
20
+ display: flex;
21
+ text-decoration: none;
22
+ transition: background-color 0.12s ease-in-out;
23
+ align-items: center;
24
+ box-shadow: none;
25
+ font-weight: 500;
18
26
 
19
- .spark-button {
20
- @include button-size($pad-md, 13px);
21
- @include base-button-theme($fl-gray-200, $base-text-color);
22
- border-radius: $radius-base;
23
- cursor: pointer;
24
- display: flex;
25
- text-decoration: none;
26
- transition: background-color 0.12s ease-in-out;
27
- align-items: center;
28
- box-shadow: none;
29
- font-weight: 500;
27
+ .spark-icon {
28
+ margin-right: $pad-base;
29
+ }
30
30
 
31
- .spark-icon {
32
- margin-right: $pad-base;
33
- }
31
+ &:focus {
32
+ outline: none;
33
+ }
34
34
 
35
- &:focus {
36
- outline: none;
35
+ // Button sizes
36
+ @each $label, $map in $button-sizes {
37
+ &.size-#{$label} {
38
+ @include button-size(map-get($map, horizontal-padding), map-get($map, vertical-padding), map-get($map, font-size));
37
39
  }
40
+ }
38
41
 
39
- // Button sizes
40
- @each $label, $map in $button-sizes {
41
- &.size-#{$label} {
42
- @include button-size(map-get($map, padding), map-get($map, font-size));
43
- }
42
+ // Base button colors
43
+ @each $color-name, $color in $button-colors {
44
+ &.color-#{$color-name} {
45
+ @include base-button-theme($color, $color);
44
46
  }
47
+ }
45
48
 
46
- // Base button colors
49
+ // Primary button
50
+ &.theme-primary {
51
+ @include primary-button-theme(map-get($button-colors, blue));
52
+
53
+ // Primary button colors
47
54
  @each $color-name, $color in $button-colors {
48
55
  &.color-#{$color-name} {
49
- @include base-button-theme($color, $color);
50
- }
51
- }
52
-
53
- // Primary button
54
- &.theme-primary {
55
- @include primary-button-theme(map-get($button-colors, blue));
56
-
57
- // Primary button colors
58
- @each $color-name, $color in $button-colors {
59
- &.color-#{$color-name} {
60
- @include primary-button-theme($color);
61
- }
56
+ @include primary-button-theme($color);
62
57
  }
63
58
  }
59
+ }
64
60
 
65
- // Text button
66
- &.theme-text {
67
- @include text-button-theme;
61
+ // Text button
62
+ &.theme-text {
63
+ @include text-button-theme;
68
64
 
69
- // Text button colors
70
- @each $color-name, $color in $button-colors {
71
- &.color-#{$color-name} {
72
- @include text-button-theme($color);
73
- }
65
+ // Text button colors
66
+ @each $color-name, $color in $button-colors {
67
+ &.color-#{$color-name} {
68
+ @include text-button-theme($color);
74
69
  }
75
70
  }
71
+ }
76
72
 
77
- // Remove margin if no text
78
- &.theme-icon-only {
79
- & .spark-icon {
80
- margin-right: 0;
81
- }
73
+ // Remove margin if no text
74
+ &.theme-icon-only {
75
+ & .spark-icon {
76
+ margin-right: 0;
82
77
  }
83
78
  }
84
79
  }