nfg_ui 0.11.4 → 0.11.5

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 (19) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_badge.scss +4 -5
  3. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_buttons.scss +4 -5
  4. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_custom.scss +1 -0
  5. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_reboot.scss +1 -1
  6. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/custom/_activity_feed.scss +7 -0
  7. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_custom.scss +1 -0
  8. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_activity_feed.scss +34 -0
  9. data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_overlay_blocker.scss +1 -1
  10. data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_custom.scss +1 -0
  11. data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_icon.scss +5 -0
  12. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom-forms.scss +4 -0
  13. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom.scss +2 -0
  14. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_avatar.scss +1 -1
  15. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_icon.scss +34 -0
  16. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_skeleton.scss +50 -0
  17. data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_tile.scss +4 -4
  18. data/lib/nfg_ui/version.rb +1 -1
  19. metadata +7 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b74d360cda26e2c2761e08f2e7518801f4ff7b6748c47c8329c8201eda8ebc71
4
- data.tar.gz: 114168053528379c43dfadcb54c4c3fdf73355c76013fcda368aa0b13748758e
3
+ metadata.gz: f6873ae0b61984e697a1b6ee78a84296be11729d47c97a1b537e6fd57b45c7fd
4
+ data.tar.gz: 45feded1d9e2cd3313126dbe0b34975ae606edede1559bc04e21a45320ef734c
5
5
  SHA512:
6
- metadata.gz: 31bc70d2cc5e96ac4c8414d1d1c38cb8ff760e23b4e021c6ff4b2583b783e9f505cf39540e93a311b786629c03075286eca26af1d5846fc02ca502b60285cba7
7
- data.tar.gz: 87c5a53d2f865c51d0af6c090d9b25166aee6c72d3215cafeb672b3d6aa605e509530dd7844c2dad1a59e12c77c13fd3271d1ef03f4ddba940fc0486c4748e41
6
+ metadata.gz: 6729574a1e6a4a86db7a68bc7124bf2041ff5e6f78826f8685df2746dcd126c86db446bd56eb384f3d20027db57582eff768eca0cbd1e90f8a15e15c0df79f42
7
+ data.tar.gz: a7cdec8d0b423255b95080033361a5a4f7bdd8e4feaaf0f165d5f2d65b793caa7512c2e7aa5bfc00c1291c706ff066754943f2a2de7255d1534610a5657482c8
@@ -1,9 +1,8 @@
1
1
  @each $color, $value in $colors {
2
2
  .#{$color} {
3
- .badge-primary { @include badge-variant($value); }
3
+ .badge-primary {
4
+ @include badge-variant($value);
5
+ color: $white !important;
6
+ }
4
7
  }
5
8
  }
6
-
7
- // temporary color fix for consistency on a white text on orange bg
8
- // overrides color contrast settings
9
- .orange .badge-primary { color: $white !important; }
@@ -1,6 +1,9 @@
1
1
  @each $color, $value in $colors {
2
2
  .#{$color} {
3
- .btn-primary { @include button-variant($value, $value); }
3
+ .btn-primary {
4
+ @include button-variant($value, $value);
5
+ color: $white !important;
6
+ }
4
7
  .show > .btn-primary.dropdown-toggle {
5
8
  background-color: darken($value, 10%);
6
9
  border-color: darken($value, 10%);
@@ -8,7 +11,3 @@
8
11
  .btn-outline-secondary, .btn-link { color: $value; }
9
12
  }
10
13
  }
11
-
12
- // temporary color fix for consistency on a white text on orange bg
13
- // overrides color contrast settings
14
- .orange .btn-primary { color: $white !important; }
@@ -1,3 +1,4 @@
1
1
  // Our custom styles
2
+ @import 'custom/activity_feed';
2
3
  @import 'custom/icons';
3
4
  @import 'custom/nav_step';
@@ -1,6 +1,6 @@
1
1
  @each $color, $value in $colors {
2
2
  .#{$color} {
3
- a:not(.btn) {
3
+ a:not(.dropdown-item) {
4
4
  color: $value;
5
5
  @include hover { color: darken($value, 15%); }
6
6
  }
@@ -0,0 +1,7 @@
1
+ @each $color, $value in $colors {
2
+ .activity-feed-item {
3
+ &.#{nth($color, 1)} {
4
+ .activity-icon { background-color: $value; }
5
+ }
6
+ }
7
+ }
@@ -1,4 +1,5 @@
1
1
  // Our custom styles
2
+ @import 'custom/activity_feed';
2
3
  @import 'custom/builder_layout';
3
4
  @import 'custom/campaign_card';
4
5
  @import 'custom/campaign_preview';
@@ -0,0 +1,34 @@
1
+ // Activity feed list items
2
+ .activity-feed-item {
3
+ position: relative;
4
+ padding: 0 0 $spacer ($spacer * 1.5);
5
+ border: none;
6
+ z-index: 0;
7
+ &::after {
8
+ position: absolute;
9
+ top: 0;
10
+ left: 12px;
11
+ bottom: 0;
12
+ z-index: 0;
13
+ border-left: $border-width solid $border-color;
14
+ content: "";
15
+ }
16
+ &:last-child {
17
+ padding-bottom: 0;
18
+ &::after { display: none; }
19
+ }
20
+ .activity-icon {
21
+ position: absolute;
22
+ top: 2px;
23
+ left: 0;
24
+ display: block;
25
+ width: $spacer;
26
+ height: $spacer;
27
+ font-size: $font-size-sm;
28
+ line-height: $spacer;
29
+ z-index: 1;
30
+ text-align: center;
31
+ @include border-radius(50%);
32
+ box-shadow: 0 0 0 2px rgba(255,255,255,1);
33
+ }
34
+ }
@@ -40,7 +40,7 @@ $redacted-font-family: "BLOKK";
40
40
  font-family: $font-family-base;
41
41
  letter-spacing: 0;
42
42
  word-spacing: 0;
43
- background-color: rgba(255,255,255,0.9);
43
+ background-color: transparentize($white, 0.2);
44
44
  }
45
45
  .overlay-blur {
46
46
  transition: $transition-base;
@@ -1,6 +1,7 @@
1
1
  // Our custom styles
2
2
  @import 'custom/avatar';
3
3
  @import 'custom/everyday_giving';
4
+ @import 'custom/icon';
4
5
  @import 'custom/nav_step';
5
6
  @import 'custom/slat';
6
7
  @import 'custom/video_countdown';
@@ -0,0 +1,5 @@
1
+ .icon-circle {
2
+ display: -ms-inline-flexbox;
3
+ -ms-flex-align: center;
4
+ -ms-flex-pack: center;
5
+ }
@@ -10,6 +10,7 @@
10
10
  }
11
11
  &:focus:not(:checked) ~ .custom-control-label::before { border-color: $input-border-color; }
12
12
  }
13
+ + .custom-control:not(.custom-control-inline) { margin-top: ($spacer * .25); }
13
14
  }
14
15
 
15
16
  // Custom control indicators
@@ -41,6 +42,9 @@
41
42
  //
42
43
 
43
44
  .custom-select {
45
+ display: block;
46
+ width: auto;
47
+ max-width: 100%;
44
48
  font-weight: $btn-font-weight;
45
49
  cursor: pointer;
46
50
  box-shadow: none;
@@ -1,11 +1,13 @@
1
1
  // Our custom styles
2
2
  @import 'custom/avatar';
3
3
  @import 'custom/device_preview';
4
+ @import 'custom/icon';
4
5
  @import 'custom/illustration';
5
6
  @import 'custom/mobile';
6
7
  @import 'custom/nav_step';
7
8
  @import 'custom/redactor';
8
9
  @import 'custom/social_share';
10
+ @import 'custom/skeleton';
9
11
  @import 'custom/slat';
10
12
  @import 'custom/ticket';
11
13
  @import 'custom/tile';
@@ -21,7 +21,7 @@
21
21
  .avatar-text {
22
22
  font-weight: $font-weight-bold;
23
23
  font-size: $font-size-base;
24
- line-height: 1;
24
+ line-height: 1.2;
25
25
  color: $body-color;
26
26
  text-align: center;
27
27
  white-space: nowrap;
@@ -0,0 +1,34 @@
1
+ // Custom icon styles
2
+ // icons shouldn't be larger than the h1 font-size. use illustrations for larger visuals.
3
+ // don't use icon circles for icons smaller than icon-circle-sm size. use just an icon.
4
+ .icon-circle {
5
+ position: relative;
6
+ display: inline-flex;
7
+ align-items: center;
8
+ justify-content: center;
9
+ vertical-align: middle;
10
+ width: ($spacer * 1.5);
11
+ height: ($spacer * 1.5);
12
+ font-size: $font-size-base;
13
+ background-color: $border-color;
14
+ border-radius: 50%;
15
+ &.icon-circle-outline {
16
+ background-color: $white;
17
+ border: $border-width solid $border-color;
18
+ }
19
+ &.icon-circle-sm {
20
+ width: $spacer;
21
+ height: $spacer;
22
+ font-size: $font-size-sm;
23
+ }
24
+ &.icon-circle-lg {
25
+ width: ($spacer * 2);
26
+ height: ($spacer * 2);
27
+ font-size: $font-size-lg;
28
+ }
29
+ &.icon-circle-xl {
30
+ width: ($spacer * 3);
31
+ height: ($spacer * 3);
32
+ font-size: $h1-font-size;
33
+ }
34
+ }
@@ -0,0 +1,50 @@
1
+ // Skeleton styles for placheholder content
2
+ .skeleton-avatar, .skeleton-heading, .skeleton-paragraph {
3
+ display: inline-block;
4
+ margin-bottom: ($spacer * .5);
5
+ background-color: $border-color;
6
+ overflow: hidden;
7
+ &::after {
8
+ position: absolute;
9
+ top: 0;
10
+ right: 0;
11
+ bottom: 0;
12
+ left: 0;
13
+ width: 100%;
14
+ height: 100%;
15
+ background-color: $body-bg;
16
+ animation: skeleton-sheen 1s linear infinite alternate;
17
+ content: '';
18
+
19
+ // any skeleton element inside a container with the the .loaded class removes the sheen animation.
20
+ .loaded & {
21
+ background-color: transparent;
22
+ animation: none;
23
+ }
24
+ }
25
+ }
26
+ .skeleton-avatar {
27
+ width: ($spacer * 1.5);
28
+ height: ($spacer * 1.5);
29
+ border-radius: 50%;
30
+ }
31
+ .skeleton-heading {
32
+ width: 70%;
33
+ height: $spacer;
34
+ border-radius: ($spacer * .5);
35
+ &:nth-child(even) { width: 45%; }
36
+ }
37
+ .skeleton-paragraph {
38
+ width: 100%;
39
+ height: ($spacer * .5);
40
+ border-radius: ($spacer * .25);
41
+ &:nth-child(2n+1) { width: 90%; }
42
+ &:nth-child(3n+1) { width: 75%; }
43
+ &:nth-child(4n+1) { width: 80%; }
44
+ }
45
+
46
+ // Sheen animation used on skeleton elements
47
+ @keyframes skeleton-sheen {
48
+ 0% { opacity: .45; }
49
+ to { opacity: .9; }
50
+ }
@@ -22,13 +22,13 @@
22
22
  display: block;
23
23
  margin-right: auto;
24
24
  margin-left: auto;
25
- @include media-breakpoint-down(sm) { padding-bottom: $grid-gutter-width; }
26
- @include media-breakpoint-up(sm) { padding-bottom: ($grid-gutter-width * 1.5); }
25
+ @include media-breakpoint-down(sm) { padding-bottom: ($grid-gutter-width * 1.5); }
26
+ @include media-breakpoint-up(sm) { padding-bottom: ($grid-gutter-width * 2); }
27
27
  &:last-child { padding-bottom: 0; }
28
28
  + .tile-section {
29
29
  border-top: $border-width solid $border-color;
30
- @include media-breakpoint-down(sm) { padding-top: $grid-gutter-width; }
31
- @include media-breakpoint-up(sm) { padding-top: ($grid-gutter-width * 1.5); }
30
+ @include media-breakpoint-down(sm) { padding-top: ($grid-gutter-width * 1.5); }
31
+ @include media-breakpoint-up(sm) { padding-top: ($grid-gutter-width * 2); }
32
32
  }
33
33
  }
34
34
 
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module NfgUi
4
- VERSION = '0.11.4'
4
+ VERSION = '0.11.5'
5
5
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: nfg_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.11.4
4
+ version: 0.11.5
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jonathan Roehm
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2020-10-26 00:00:00.000000000 Z
12
+ date: 2020-10-29 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: bootstrap
@@ -407,6 +407,7 @@ files:
407
407
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_reboot.scss
408
408
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_type.scss
409
409
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/_utilities.scss
410
+ - app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/custom/_activity_feed.scss
410
411
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/custom/_icons.scss
411
412
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/nfg_theme/custom/_nav_step.scss
412
413
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/color_variations/plugins/_datetimepicker.scss
@@ -419,6 +420,7 @@ files:
419
420
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_nav.scss
420
421
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_navbar.scss
421
422
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_tables.scss
423
+ - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_activity_feed.scss
422
424
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_builder_layout.scss
423
425
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_card.scss
424
426
  - app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/custom/_campaign_preview.scss
@@ -476,6 +478,7 @@ files:
476
478
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_utilities.scss
477
479
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_avatar.scss
478
480
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_everyday_giving.scss
481
+ - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_icon.scss
479
482
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_nav_step.scss
480
483
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_slat.scss
481
484
  - app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/custom/_video_countdown.scss
@@ -502,10 +505,12 @@ files:
502
505
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_type.scss
503
506
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_avatar.scss
504
507
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_device_preview.scss
508
+ - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_icon.scss
505
509
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_illustration.scss
506
510
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_mobile.scss
507
511
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_nav_step.scss
508
512
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_redactor.scss
513
+ - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_skeleton.scss
509
514
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_slat.scss
510
515
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_social_share.scss
511
516
  - app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_ticket.scss