nfg_ui 0.14.1 → 0.14.2
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.
- checksums.yaml +4 -4
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/application.scss +1 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/admin/nfg_theme/_navbar.scss +5 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/application.scss +1 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/legacy_browser_support/nfg_theme/_navbar.scss +11 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/nfg_theme/_carousel.scss +0 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_dropdown.scss +4 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_input-group.scss +9 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_modal.scss +3 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_nav.scss +3 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_position.scss +6 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_transitions.scss +2 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_type.scss +4 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_datetimepicker.scss +3 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_dropzone.scss +15 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_trix.scss +97 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_turbolinks.scss +1 -1
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_custom.scss +1 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_beacon.scss +48 -0
- data/lib/nfg_ui/components/utilities/resource_themeable.rb +1 -0
- data/lib/nfg_ui/ui/bootstrap.rb +2 -0
- data/lib/nfg_ui/version.rb +1 -1
- metadata +8 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1e4da544675920e61a79ee9751d7686af6a55110a6c9172986135d153aa8f552
|
|
4
|
+
data.tar.gz: 24ec5c8b05df15cf0884a0550e611cf3b8eddfe9e45708004475cbad581dd096
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: fc2a6cadf477d7b859d4bd004b9518274cc9a6b8cd035dc520e85e47d03376a54658f2face9345802d763ead07b07a553ae2aef9bd1afaa816b796556df9da13
|
|
7
|
+
data.tar.gz: 0721aea321f529af27845fc652b6fb3aa5bf1e1eff0dcf22480a26e41c5955e4cd901a9884b94cb9d978f42bc71923ca728450e205b5ad0bc02baad5361da6c6
|
|
@@ -101,6 +101,7 @@
|
|
|
101
101
|
left: 200px;
|
|
102
102
|
border-bottom: $border-width solid $nav-divider-color;
|
|
103
103
|
}
|
|
104
|
+
|
|
104
105
|
}
|
|
105
106
|
#site_navbar {
|
|
106
107
|
font-size: $font-size-sm;
|
|
@@ -120,7 +121,10 @@
|
|
|
120
121
|
text-align: center;
|
|
121
122
|
border-left: $border-width solid $nav-divider-color;
|
|
122
123
|
@include media-breakpoint-down(lg) {
|
|
123
|
-
|
|
124
|
+
flex-basis: 0;
|
|
125
|
+
flex-grow: 1;
|
|
126
|
+
width: 100%;
|
|
127
|
+
max-width: 100%;
|
|
124
128
|
&:first-child { border-left: none; }
|
|
125
129
|
}
|
|
126
130
|
.nav-alert {
|
data/app/assets/stylesheets/nfg_ui/network_for_good/{public → core}/nfg_theme/_carousel.scss
RENAMED
|
File without changes
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
// Used in auctions... bootstrap 4 alpha used this method to show dropdown-menus when clicked. current nfg_ui adds a "show" class to the dropdown-menu to render it block.
|
|
2
|
+
.open > .dropdown-menu { display: block; }
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
.dropdown-toggle::after { content: none; }
|
|
2
6
|
|
|
3
7
|
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
.input-group {
|
|
2
|
+
|
|
3
|
+
// Used in auctions...adds support for div's with this class to be styled the same as input elements in order to prevent it visually breaking when an error occurs on a form with input-groups.
|
|
4
|
+
> .field_with_errors {
|
|
5
|
+
flex: 1 1 auto;
|
|
6
|
+
width: 1%;
|
|
7
|
+
min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
|
|
8
|
+
}
|
|
9
|
+
}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
// Used in auctions... bootstrap 4 alpha used this method to show modal backgrounds when modals are open. current nfg_ui adds a "show" class to the modal background to render it.
|
|
2
|
+
.modal-backdrop.in { opacity: $modal-backdrop-opacity; }
|
|
3
|
+
|
|
1
4
|
// Footer (for actions)
|
|
2
5
|
.modal-footer { justify-content: flex-start; } // Left align buttons which overrides bootstrap's default of right aligned
|
|
3
6
|
|
|
@@ -52,6 +52,10 @@ a.no-link-color {
|
|
|
52
52
|
}
|
|
53
53
|
}
|
|
54
54
|
|
|
55
|
+
// style to support underlined links that are by default no text decoration
|
|
56
|
+
.text-decoration-underline { text-decoration: underline; }
|
|
57
|
+
|
|
58
|
+
|
|
55
59
|
// Contextual colors
|
|
56
60
|
@each $color, $value in $colors {
|
|
57
61
|
@include text-emphasis-variant(".text-#{$color}", $value);
|
|
@@ -5,11 +5,13 @@
|
|
|
5
5
|
//*****************************//
|
|
6
6
|
|
|
7
7
|
//** form style that clears out readonly styles
|
|
8
|
-
.form-control[data-datetimepicker]
|
|
8
|
+
.form-control[data-datetimepicker],
|
|
9
|
+
.form-control.datetime-picker:disabled, .form-control.datetime-picker[readonly] { // Used in auctions... it is not using the NFG UI version of the datetimepicker, so we need this style as a duplicate of the above style.
|
|
9
10
|
background-color: $input-bg;
|
|
10
11
|
cursor: pointer;
|
|
11
12
|
}
|
|
12
13
|
|
|
14
|
+
|
|
13
15
|
//** Base styles
|
|
14
16
|
.bootstrap-datetimepicker-widget {
|
|
15
17
|
display: block;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
.dropzone-target {
|
|
2
|
+
padding: $spacer !important;
|
|
3
|
+
min-height: ($spacer * 6) !important;
|
|
4
|
+
border: $border-width solid $border-color !important;
|
|
5
|
+
background-color: $white;
|
|
6
|
+
transition: $transition-base;
|
|
7
|
+
border-radius: $border-radius !important;
|
|
8
|
+
}
|
|
9
|
+
.dz-default {
|
|
10
|
+
transition: $transition-fade;
|
|
11
|
+
.dz-drag-hover & { opacity: 0.5; }
|
|
12
|
+
.dz-started & { display: none; }
|
|
13
|
+
}
|
|
14
|
+
[data-dz-remove] { cursor: pointer; }
|
|
15
|
+
.dz-preview + .dz-preview { margin-top: $spacer; }
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
|
|
3
|
+
// the trix-editor content (whether displayed or under editing). Feel free to incorporate this
|
|
4
|
+
// inclusion directly in any other asset bundle and remove this file.
|
|
5
|
+
//
|
|
6
|
+
//= require trix/dist/trix
|
|
7
|
+
|
|
8
|
+
// We need to override trix.css’s image gallery styles to accommodate the
|
|
9
|
+
// <action-text-attachment> element we wrap around attachments. Otherwise,
|
|
10
|
+
// images in galleries will be squished by the max-width: 33%; rule.
|
|
11
|
+
// @import "trix/dist/trix";
|
|
12
|
+
|
|
13
|
+
.trix-content {
|
|
14
|
+
.attachment-gallery {
|
|
15
|
+
> action-text-attachment,
|
|
16
|
+
> .attachment {
|
|
17
|
+
flex: 1 0 33%;
|
|
18
|
+
padding: 0 0.5em;
|
|
19
|
+
max-width: 33%;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&.attachment-gallery--2,
|
|
23
|
+
&.attachment-gallery--4 {
|
|
24
|
+
> action-text-attachment,
|
|
25
|
+
> .attachment {
|
|
26
|
+
flex-basis: 50%;
|
|
27
|
+
max-width: 50%;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
action-text-attachment {
|
|
33
|
+
.attachment {
|
|
34
|
+
padding: 0 !important;
|
|
35
|
+
max-width: 100% !important;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Styles to make it look similar to redactor
|
|
41
|
+
[id *= 'trix-toolbar'] {
|
|
42
|
+
border: $border-width solid $border-color;
|
|
43
|
+
border-bottom: none;
|
|
44
|
+
.trix-button-group {
|
|
45
|
+
margin-bottom: 0;
|
|
46
|
+
border: none;
|
|
47
|
+
border-radius: 0;
|
|
48
|
+
&:not(:first-child) { margin-left: 0; }
|
|
49
|
+
}
|
|
50
|
+
.trix-button {
|
|
51
|
+
padding: 16px 10px;
|
|
52
|
+
width: auto;
|
|
53
|
+
min-width: 34px;
|
|
54
|
+
color: $body-color;
|
|
55
|
+
font-size: $font-size-sm;
|
|
56
|
+
border: none;
|
|
57
|
+
|
|
58
|
+
&:hover {
|
|
59
|
+
color: $white;
|
|
60
|
+
background-color: $primary;
|
|
61
|
+
}
|
|
62
|
+
&.trix-active { background-color: $input-disabled-bg; }
|
|
63
|
+
&:not(:first-child) { border-left: none; }
|
|
64
|
+
&:before {
|
|
65
|
+
opacity: 1;
|
|
66
|
+
background-size: 18px;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
.trix-dialog {
|
|
70
|
+
padding: $dropdown-padding-y $dropdown-padding-x;
|
|
71
|
+
font-size: $dropdown-font-size;
|
|
72
|
+
color: $dropdown-color;
|
|
73
|
+
background: $dropdown-bg;
|
|
74
|
+
border: none;
|
|
75
|
+
border-radius: $dropdown-border-radius;
|
|
76
|
+
box-shadow: $dropdown-box-shadow;
|
|
77
|
+
}
|
|
78
|
+
.trix-input--dialog {
|
|
79
|
+
padding: $input-padding-y $input-padding-x;
|
|
80
|
+
font-family: $input-font-family;
|
|
81
|
+
font-size: $input-font-size;
|
|
82
|
+
font-weight: $input-font-weight;
|
|
83
|
+
line-height: $input-line-height;
|
|
84
|
+
color: $input-color;
|
|
85
|
+
border: $input-border-width solid $input-border-color;
|
|
86
|
+
border-radius: $input-border-radius;
|
|
87
|
+
&:placeholder { color: $input-placeholder-color; }
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
// Editor similar to textarea
|
|
92
|
+
trix-editor {
|
|
93
|
+
padding: 20px;
|
|
94
|
+
min-height: ($spacer * 5);
|
|
95
|
+
border: $input-border-width solid $input-border-color;
|
|
96
|
+
border-radius: $input-border-radius;
|
|
97
|
+
}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// Pulsating "beacon" styles for indicator
|
|
2
|
+
.beacon {
|
|
3
|
+
width: ($spacer * .25);
|
|
4
|
+
height: ($spacer * .25);
|
|
5
|
+
border-radius: ($spacer * .25);
|
|
6
|
+
&::after {
|
|
7
|
+
position: absolute;
|
|
8
|
+
top: -8px;
|
|
9
|
+
left: -8px;
|
|
10
|
+
height: 12px;
|
|
11
|
+
width: 12px;
|
|
12
|
+
border: 12px solid;
|
|
13
|
+
border-radius: ($spacer * .375);
|
|
14
|
+
animation: pulsate 1s ease-out infinite;
|
|
15
|
+
content: '';
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
@each $color, $value in $theme-colors {
|
|
19
|
+
.beacon-#{$color} {
|
|
20
|
+
background-color: $value;
|
|
21
|
+
&::after { border-color: $value; }
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
// Heartbeat animation used on beacon for sysusers
|
|
27
|
+
@keyframes pulsate {
|
|
28
|
+
0% {
|
|
29
|
+
transform: scale(0);
|
|
30
|
+
opacity: .1;
|
|
31
|
+
}
|
|
32
|
+
25% {
|
|
33
|
+
transform: scale(0.1);
|
|
34
|
+
opacity: .2;
|
|
35
|
+
}
|
|
36
|
+
50% {
|
|
37
|
+
transform: scale(0.5);
|
|
38
|
+
opacity: .3;
|
|
39
|
+
}
|
|
40
|
+
75% {
|
|
41
|
+
transform: scale(0.8);
|
|
42
|
+
opacity: .4;
|
|
43
|
+
}
|
|
44
|
+
100% {
|
|
45
|
+
transform: scale(1);
|
|
46
|
+
opacity: .1;
|
|
47
|
+
}
|
|
48
|
+
}
|
data/lib/nfg_ui/ui/bootstrap.rb
CHANGED
data/lib/nfg_ui/version.rb
CHANGED
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.14.
|
|
4
|
+
version: 0.14.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jonathan Roehm
|
|
@@ -510,17 +510,21 @@ files:
|
|
|
510
510
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_button-group.scss
|
|
511
511
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_buttons.scss
|
|
512
512
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_card.scss
|
|
513
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_carousel.scss
|
|
513
514
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom-forms.scss
|
|
514
515
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_custom.scss
|
|
515
516
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_dropdown.scss
|
|
516
517
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_forms.scss
|
|
518
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_input-group.scss
|
|
517
519
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_modal.scss
|
|
518
520
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_nav.scss
|
|
521
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_position.scss
|
|
519
522
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_print.scss
|
|
520
523
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_progress.scss
|
|
521
524
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_reboot.scss
|
|
522
525
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_sizing.scss
|
|
523
526
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_tooltip.scss
|
|
527
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_transitions.scss
|
|
524
528
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/_type.scss
|
|
525
529
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_avatar.scss
|
|
526
530
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_builder_layout.scss
|
|
@@ -541,10 +545,12 @@ files:
|
|
|
541
545
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/nfg_theme/custom/_tile.scss
|
|
542
546
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_datepicker.scss
|
|
543
547
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_datetimepicker.scss
|
|
548
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_dropzone.scss
|
|
544
549
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_intercom.scss
|
|
545
550
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_multi.scss
|
|
546
551
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_select2.scss
|
|
547
552
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_sticky_div.scss
|
|
553
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_trix.scss
|
|
548
554
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_turbolinks.scss
|
|
549
555
|
- app/assets/stylesheets/nfg_ui/network_for_good/core/plugins/_twitter_typeahead.scss
|
|
550
556
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/application.scss
|
|
@@ -562,13 +568,13 @@ files:
|
|
|
562
568
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/nfg_theme/_typography.scss
|
|
563
569
|
- app/assets/stylesheets/nfg_ui/network_for_good/email/settings/_settings.scss
|
|
564
570
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/application.scss
|
|
565
|
-
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_carousel.scss
|
|
566
571
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_custom.scss
|
|
567
572
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_list-group.scss
|
|
568
573
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_nav.scss
|
|
569
574
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_navbar.scss
|
|
570
575
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_reboot.scss
|
|
571
576
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_background_variations.scss
|
|
577
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_beacon.scss
|
|
572
578
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_builder_layout.scss
|
|
573
579
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_donor_account.scss
|
|
574
580
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_donor_scroll.scss
|