nfg_ui 0.12.16.1 → 0.13.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 35b6563cb909d89bca9f4d5d314ce9458ed516e31c56a1dad16cdea45d9d6ae3
4
- data.tar.gz: e5c8efb6472107a9716ba2a5af663d3fda8ea5d8ff5e80286ccfb68433f6a8ee
3
+ metadata.gz: 8235aa4af7843ba006e8caae070d20f87561c6d39db6dda7acc0f86c5bb2a54f
4
+ data.tar.gz: b2cda42305a691eba3bfc4351851b1dd21d753b8b6e162f1bb7229036d5c1eb7
5
5
  SHA512:
6
- metadata.gz: 2546a857c660872f8ebd9e1d9cacc3af7aed3f7d714501bc774b2823ec76fe107c24d6e54f266c888999a0445aeba6f9410676a0d9bf40849259b0062126783b
7
- data.tar.gz: 64e3bcb4d8bfec41b74d99ac575940c75ce0cfc136759264ed3a753122891ac2c45fcda153fc6cc69262c0355892233d708a39beb6f8b556a68e2087b15b8cb7
6
+ metadata.gz: 0e9a5cc6430ecdef3e4090ff685d8455fd5ac6d6291052bca66e8715d7817484db14a014a635ff6b52f0350cb1a1cfdfb42b5a725d4e7cc8c030ea878fc0d81f
7
+ data.tar.gz: b94dd4c453cec22475b90ca00faf7cb6d19646c8e3e2386b037f38925fe78073eb73a73ce8e3642620feb69d3992690b554b6564d1ee5c2a2f0bab01872d1d8d
@@ -296,7 +296,7 @@ $font-family-sans-serif: "Open Sans", "Helvetica Neue", Arial, sans-serif;
296
296
  // stylelint-enable value-keyword-case
297
297
 
298
298
  $font-size-base: 1.6rem; // Root font size is 62.5% to make calculations to REM 10 point based
299
- // $font-size-lg: ($font-size-base * 1.25) !default;
299
+ $font-size-lg: ($font-size-base * 1.25);
300
300
  $font-size-sm: ($font-size-base * .875);
301
301
 
302
302
  // $font-weight-lighter: lighter !default;
@@ -1072,10 +1072,10 @@ $breadcrumb-active-color: $text-muted;
1072
1072
 
1073
1073
  // Carousel
1074
1074
 
1075
- // $carousel-control-color: $white !default;
1076
- // $carousel-control-width: 15% !default;
1077
- $carousel-control-opacity: .3;
1078
- // $carousel-control-hover-opacity: .9 !default;
1075
+ $carousel-control-color: $white;
1076
+ $carousel-control-width: ($spacer * 1.5);
1077
+ $carousel-control-opacity: .5;
1078
+ $carousel-control-hover-opacity: .9;
1079
1079
  // $carousel-control-transition: opacity .15s ease !default;
1080
1080
 
1081
1081
  $carousel-indicator-width: ($spacer * .5);
@@ -1088,10 +1088,12 @@ $carousel-indicator-transition: $text-muted;
1088
1088
  // $carousel-caption-width: 70% !default;
1089
1089
  // $carousel-caption-color: $white !default;
1090
1090
 
1091
- // $carousel-control-icon-width: 20px !default;
1091
+ $carousel-control-icon-width: $spacer;
1092
1092
 
1093
- // $carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
1094
- // $carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
1093
+ // $carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/></svg>") !default;
1094
+ // $carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' width='8' height='8' viewBox='0 0 8 8'><path d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/></svg>") !default;
1095
+ $carousel-control-prev-icon-bg: '\f0d9';
1096
+ $carousel-control-next-icon-bg: '\f0da';
1095
1097
 
1096
1098
  // $carousel-transition-duration: .6s !default;
1097
1099
  // $carousel-transition: transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
@@ -1,3 +1,5 @@
1
+ $carousel-thumbnail-size: ($spacer * 2.5); // 80px
2
+
1
3
  .carousel-item { -ms-flex-align: center; }
2
4
 
3
5
  // Left/right controls for nav
@@ -15,4 +17,30 @@
15
17
  display: -ms-flexbox;
16
18
  -ms-flex-pack: center;
17
19
  li { -ms-flex: 0 1 auto; }
18
- }
20
+ }
21
+
22
+
23
+ // Carousels that have a fixed aspect ratio height
24
+ .carousel-fixed-height {
25
+ .carousel-item {
26
+ display: -ms-flexbox;
27
+ -ms-flex-align: center;
28
+ -ms-flex-pack: center;
29
+ }
30
+ }
31
+
32
+
33
+ // Carousels that use image thumbnails for indicators
34
+ .carousel-has-thumbnails {
35
+ .carousel-indicators {
36
+ @include media-breakpoint-down(lg) {
37
+ -ms-flex-pack: start;
38
+ }
39
+ li {
40
+ @include media-breakpoint-down(lg) {
41
+ -ms-flex-negative: 0;
42
+ -ms-flex-preferred-size: $carousel-thumbnail-size;
43
+ }
44
+ }
45
+ }
46
+ }
@@ -1,9 +1,185 @@
1
+ $carousel-fixed-height: (3 / 4); // 4:3 aspect ratio
2
+ $carousel-thumbnail-size: ($spacer * 2.5); // 80px
3
+
4
+ //
5
+ // Left/right controls for nav
6
+ //
7
+ .carousel-control-prev-icon,
8
+ .carousel-control-next-icon {
9
+ position: absolute;
10
+ top: 50%;
11
+ right: 0;
12
+ left: 0;
13
+ width: 100%;
14
+ background: none;
15
+ background-image: none;
16
+ &::before, &::after {
17
+ position: absolute;
18
+ top: -($carousel-control-icon-width * .5);
19
+ left: ($spacer * .25);
20
+ display: block;
21
+ margin: auto;
22
+ width: $carousel-control-icon-width;
23
+ height: $carousel-control-icon-width;
24
+ content: '';
25
+ }
26
+ &::before {
27
+ background-color: $white;
28
+ border-radius: 50%;
29
+ z-index: 1;
30
+ box-shadow: $box-shadow-sm;
31
+ }
32
+ &::after {
33
+ font-family: "FontAwesome";
34
+ font-size: $font-size-lg;
35
+ line-height: $carousel-control-icon-width;
36
+ color: $body-color;
37
+ text-align: center;
38
+ z-index: 10;
39
+ }
40
+ }
41
+ .carousel-control-prev-icon {
42
+ &:after {
43
+ padding-right: 2px;
44
+ content: $carousel-control-prev-icon-bg;
45
+ }
46
+ }
47
+ .carousel-control-next-icon {
48
+ &:after {
49
+ padding-left: 2px;
50
+ content: $carousel-control-next-icon-bg;
51
+ }
52
+ }
53
+
54
+
1
55
  // Optional indicator pips
2
56
  //
3
- // Add an unordered list with the following class and add a list item for each
57
+ // Add an ordered list with the following class and add a list item for each
4
58
  // slide your carousel holds.
5
-
6
59
  .carousel-indicators {
7
- bottom: 0;
8
60
  li { border-radius: 50%; }
9
61
  }
62
+
63
+
64
+ // Carousels that have a fixed aspect ratio height
65
+ .carousel-fixed-height {
66
+ width: 100%;
67
+ .carousel-inner {
68
+ &::before {
69
+ display: block;
70
+ content: "";
71
+ width: 100%;
72
+ padding-top: $carousel-fixed-height * 100%;
73
+ }
74
+ }
75
+ .carousel-item {
76
+ position: absolute;
77
+ top: 0;
78
+ right: 0;
79
+ bottom: 0;
80
+ left: 0;
81
+ display: flex;
82
+ justify-content: center;
83
+ align-items: center;
84
+ float: none; // overrides BS carousel defaults
85
+ margin-right: 0; // overrides BS carousel defaults
86
+ width: 100%;
87
+ height: 100%;
88
+ text-align: center;
89
+ overflow: hidden;
90
+ @include transition($transition-fade);
91
+ &.active.carousel-item-left,
92
+ &.active.carousel-item-right {
93
+ @include transition($transition-fade); // overrides BS carousel defaults
94
+ }
95
+ img { // keeps image scaled proportionally
96
+ width: auto !important;
97
+ min-width: 0px !important;
98
+ max-width: 100%;
99
+ height: 100% !important;
100
+ max-height: 100%;
101
+ margin: auto;
102
+ }
103
+ }
104
+ }
105
+
106
+
107
+ // Carousels that use image thumbnails for indicators
108
+ .carousel-has-thumbnails {
109
+ @include media-breakpoint-up(lg) { padding-left: ($spacer * 3.5); }
110
+ .carousel-inner {
111
+ border: $border-width solid $border-color;
112
+ border-radius: $border-radius;
113
+ }
114
+ .carousel-indicators {
115
+ margin: 0;
116
+ @include media-breakpoint-down(lg) {
117
+ justify-content: flex-start;
118
+ position: relative;
119
+ right: auto;
120
+ bottom: auto;
121
+ left: auto;
122
+ margin-top: ($spacer * .5);
123
+ width: 100%;
124
+ height: $carousel-thumbnail-size;
125
+ overflow-x: auto;
126
+ overflow-y: hidden;
127
+ @include clearfix();
128
+ }
129
+ @include media-breakpoint-up(lg) {
130
+ display: block;
131
+ position: absolute;
132
+ top: 0;
133
+ bottom: 0;
134
+ right: auto;
135
+ left: 0;
136
+ width: auto;
137
+ height: 100%;
138
+ margin-top: 0;
139
+ overflow-y: auto;
140
+ }
141
+ li {
142
+ position: relative;
143
+ width: $carousel-thumbnail-size;
144
+ height: $carousel-thumbnail-size;
145
+ text-indent: 0;
146
+ text-align: center;
147
+ background-color: transparent;
148
+ border-top: none;
149
+ border-bottom: none;
150
+ box-sizing: border-box;
151
+ border-radius: $border-radius;
152
+ overflow: hidden;
153
+ opacity: .4;
154
+ @include media-breakpoint-down(lg) {
155
+ flex-shrink: 0;
156
+ flex-basis: $carousel-thumbnail-size;
157
+ margin: 0 ($spacer * .25) 0 0;
158
+ }
159
+ @include media-breakpoint-up(lg) { margin: 0 0 ($spacer * .25); }
160
+ &::before {
161
+ display: block;
162
+ content: "";
163
+ width: 100%;
164
+ padding-top: $carousel-fixed-height * 100%;
165
+ }
166
+ &.active {
167
+ border: $border-width solid $border-color;
168
+ opacity: 1;
169
+ }
170
+ img { // keeps image scaled proportionally
171
+ position: absolute;
172
+ top: 0;
173
+ right: 0;
174
+ bottom: 0;
175
+ left: 0;
176
+ width: auto !important;
177
+ min-width: 0px !important;
178
+ max-width: 100%;
179
+ height: 100% !important;
180
+ max-height: 100%;
181
+ margin: auto;
182
+ }
183
+ }
184
+ }
185
+ }
@@ -6,6 +6,11 @@ module NfgUi
6
6
  # Bootstrap Carousel Component
7
7
  # https://getbootstrap.com/docs/4.1/components/carousel/
8
8
  class Carousel < NfgUi::Bootstrap::Components::Base
9
+ # Turn on or off auto scrolling carousel
10
+ def auto
11
+ options.fetch(:auto, true)
12
+ end
13
+
9
14
  def component_family
10
15
  :carousel
11
16
  end
@@ -15,7 +20,10 @@ module NfgUi
15
20
  end
16
21
 
17
22
  def data
18
- super.merge!(ride: 'carousel')
23
+ # false on auto means that the carousel should not automatically rotate.
24
+ data_val = auto == false ? { interval: 'false' } : { ride: 'carousel' }
25
+
26
+ super.merge!(**data_val)
19
27
  end
20
28
 
21
29
  def indicators
@@ -16,10 +16,23 @@ module NfgUi
16
16
  :carousel
17
17
  end
18
18
 
19
+ def data
20
+ return super unless interval
21
+ super.merge!(interval: interval)
22
+ end
23
+
19
24
  def image
20
25
  options.fetch(:image, nil)
21
26
  end
22
27
 
28
+ # manually pass in an interval numerical value
29
+ # which translates to miliseconds between carousel item
30
+ # slide transitions.
31
+ # ex: interval: 5000
32
+ def interval
33
+ options[:interval] || nil
34
+ end
35
+
23
36
  def label
24
37
  options.fetch(:label, nil)
25
38
  end
@@ -41,7 +54,8 @@ module NfgUi
41
54
  def non_html_attribute_options
42
55
  super.push(:image,
43
56
  :caption,
44
- :label)
57
+ :label,
58
+ :interval)
45
59
  end
46
60
  end
47
61
  end
@@ -13,26 +13,23 @@ module NfgUi
13
13
 
14
14
  def render
15
15
  content_tag(:div, html_options) do
16
- content_tag(:div, class: carousel_inner_css_classes) do
17
- concat((block_given? ? yield : body))
18
- if controls
19
- concat(NfgUi::Components::Elements::CarouselControl.new({ control: :next, carousel: "##{id}" }, view_context).render)
20
- concat(NfgUi::Components::Elements::CarouselControl.new({ control: :prev, carousel: "##{id}" }, view_context).render)
21
- end
22
- if indicators > 0
23
- concat(NfgUi::Components::Elements::CarouselIndicators.new({ count: indicators, carousel: "##{id}" }, view_context).render)
16
+ concat(
17
+ content_tag(:div, class: 'carousel-inner') do
18
+ concat((block_given? ? yield : body))
24
19
  end
20
+ )
21
+ if controls
22
+ concat(NfgUi::Components::Elements::CarouselControl.new({ control: :next, carousel: "##{id}" }, view_context).render)
23
+ concat(NfgUi::Components::Elements::CarouselControl.new({ control: :prev, carousel: "##{id}" }, view_context).render)
24
+ end
25
+ if indicators > 0
26
+ concat(NfgUi::Components::Elements::CarouselIndicators.new({ count: indicators, carousel: "##{id}" }, view_context).render)
25
27
  end
26
28
  end
27
29
  end
28
30
 
29
- private
30
-
31
- def carousel_inner_css_classes
32
- [
33
- 'carousel-inner',
34
- ('pb-3' if indicators > 0)
35
- ].join(' ').squish
31
+ def non_html_attribute_options
32
+ super.push(:auto)
36
33
  end
37
34
  end
38
35
  end
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module NfgUi
4
- VERSION = '0.12.16.1'
4
+ VERSION = '0.13.0'
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.12.16.1
4
+ version: 0.13.0
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: 2021-10-12 00:00:00.000000000 Z
12
+ date: 2021-10-20 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: bootstrap