forever_style_guide 3.5.0 → 3.6.0

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.
@@ -1,3 +1,3 @@
1
1
  module ForeverStyleGuide
2
- VERSION = "3.5.0"
2
+ VERSION = "3.6.0"
3
3
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: forever_style_guide
3
3
  version: !ruby/object:Gem::Version
4
- version: 3.5.0
4
+ version: 3.6.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Nicholas McClay
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-05-13 00:00:00.000000000 Z
11
+ date: 2019-05-29 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: rails
@@ -249,13 +249,7 @@ files:
249
249
  - app/assets/stylesheets/forever_style_guide/modules/_mars_manifest.scss
250
250
  - app/assets/stylesheets/forever_style_guide/modules/_message_box.scss
251
251
  - app/assets/stylesheets/forever_style_guide/modules/_modal.scss
252
- - app/assets/stylesheets/forever_style_guide/modules/_nav-account_dropdown.scss
253
- - app/assets/stylesheets/forever_style_guide/modules/_nav-cart.scss
254
- - app/assets/stylesheets/forever_style_guide/modules/_nav-fixed.scss
255
- - app/assets/stylesheets/forever_style_guide/modules/_nav-item-list.scss
256
- - app/assets/stylesheets/forever_style_guide/modules/_nav-mobile-menu.scss
257
- - app/assets/stylesheets/forever_style_guide/modules/_nav-offcanvas.scss
258
- - app/assets/stylesheets/forever_style_guide/modules/_nav.scss
252
+ - app/assets/stylesheets/forever_style_guide/modules/_primary_nav.scss
259
253
  - app/assets/stylesheets/forever_style_guide/modules/_progress.scss
260
254
  - app/assets/stylesheets/forever_style_guide/modules/_promo_banner.scss
261
255
  - app/assets/stylesheets/forever_style_guide/modules/_responsive_utilities.scss
@@ -1,197 +0,0 @@
1
- // desktop authenticated account dropdown styling
2
- $avatar-size-nav: 35px;
3
- $avatar-size-offcanvas: 80px;
4
- $avatar-offcanvas-visual-alignment: -10px;
5
-
6
- $user_info-max_width: 100px;
7
- $user_info-max_width-sm: 70px;
8
- $user_info-max_width-xs: 50px;
9
- $user_info-name-max_width: 180px;
10
- $user_info-icon-vertical_alignment: -2px;
11
- $user_info-toggle-hover_transition: color 0.15s ease-in-out;
12
-
13
- $padding-small-horizontal: 3px;
14
-
15
- $cart-with-count-offset: 10px; //offsets .navigation-user_info-cart-with_count when there is a signed in user
16
-
17
- $forever-club-badge-size: 50px;
18
-
19
- $forever-club-badge-position-top: 48px;
20
- $forever-club-badge-position-left: 43px;
21
-
22
-
23
- .navigation-user_info {
24
- height: 100%;
25
- margin-top: 7px;
26
- }
27
-
28
- // Dont show user info close btn when in mobile offcanvas
29
- .nav-mobile-menu .nav-mobile-menu-close {
30
- @media (max-width: $grid-float-breakpoint-max) {
31
- order: 1;// .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
32
- }
33
-
34
- &.nav-user_info-close {
35
- @media (min-width: $grid-float-breakpoint) {
36
- display: block;
37
- }
38
-
39
- @media (max-width: $grid-float-breakpoint-max) {
40
- display: none;
41
- }
42
-
43
- .navbar-toggle {
44
- @media (min-width: $grid-float-breakpoint) {
45
- display: block;
46
- }
47
- }
48
- }
49
- }
50
-
51
- .navigation-user_info-icon {
52
- margin-top: $user_info-icon-vertical_alignment;
53
- transition: $user_info-toggle-hover_transition;
54
- }
55
-
56
- .navigation-user_info-avatar {
57
- margin-right: $padding-default-horizontal / 2;
58
- border: none;
59
-
60
- @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
61
- padding-left: $cart-with-count-offset;
62
- }
63
-
64
- .avatar {
65
- height: $avatar-size-nav;
66
- width: $avatar-size-nav;
67
- min-width: $avatar-size-nav;
68
- }
69
- }
70
-
71
- // Account Dropdown / Popover
72
- .navigation-account_dropdown-trigger {
73
- display: flex;
74
- align-items: center;
75
- cursor: pointer;
76
- position: relative;
77
- height: 100%;
78
- overflow-y: hidden;
79
-
80
- @media (max-width: $grid-float-breakpoint-max) {
81
- display: none;
82
- }
83
-
84
- &:hover {
85
- .navigation-user_info-user_name,
86
- .navigation-user_info-icon {
87
- color: $color-secondary;
88
- }
89
- }
90
- }
91
-
92
- .navigation-account_dropdown {
93
- @media (min-width: $grid-float-breakpoint) {
94
- @include off-canvas-style;
95
- }
96
- }
97
-
98
- .navigation-account_dropdown-avatar {
99
- min-width: $avatar-size-offcanvas; // fixes an ie 11 flexbug
100
- margin: 0;
101
- margin-left: $avatar-offcanvas-visual-alignment;
102
- margin-right: $padding-large-horizontal;
103
- padding: 0;
104
- flex-shrink: 0;
105
- position: relative;
106
-
107
- .avatar {
108
- width: $avatar-size-offcanvas;
109
- height: $avatar-size-offcanvas;
110
- }
111
- }
112
-
113
- .navigation-account_dropdown-user {
114
- direction: ltr; // corrects orientation against nav-mobile-menu scrollbar behavior
115
- padding-bottom: $padding-large-vertical - 5;
116
- border-bottom: 2px solid $color-gray-200;
117
- }
118
-
119
- .navigation-account_dropdown-user_info {
120
- display: flex;
121
- align-items: center;
122
- }
123
-
124
- .navigation-account_dropdown-user_info-club-image {
125
- position: absolute;
126
- max-width: $forever-club-badge-size;
127
- height: $forever-club-badge-size;
128
- top: $forever-club-badge-position-top;
129
- left: $forever-club-badge-position-left;
130
- }
131
-
132
- .navigation-account_dropdown-user-club_status {
133
- margin-top: 30px;
134
- line-height: 1;
135
- }
136
-
137
- .navigation-account_dropdown-user_info-logged_in {
138
- text-align: left;
139
- flex: 1 1 auto; //ensures consistent display in ie 10
140
- }
141
-
142
- .navigation-account_dropdown-user_info-logged_in-name {
143
- display: inline-block;
144
- max-width: $user_info-name-max_width;
145
- line-height: 1.1; // just a little tighter for multi line names
146
- word-wrap: break-word;
147
- }
148
-
149
- .navigation-account_dropdown-storage_bar {
150
- height: 10px;
151
- border-radius: 50px;
152
- background-color: $color-gray-300;
153
- margin-top: $padding-xs-vertical;
154
- margin-bottom: $padding-small-vertical;
155
- width: 100%;
156
- }
157
-
158
- .navigation-account_dropdown-storage_bar-percent_used {
159
- border-radius: 50px;
160
- height: 100%;
161
- }
162
-
163
- .navigation-account_dropdown-list {
164
- padding-top: $padding-small-vertical;
165
- padding-bottom: $padding-small-vertical;
166
- margin-bottom: 0;
167
- text-align: left;
168
-
169
- &:not(:last-of-type) {
170
- border-bottom: 2px solid $color-gray-200;
171
- }
172
- }
173
-
174
- a.navigation-account_dropdown-list-item {
175
- display: block;
176
- position: relative;
177
- padding-top: $padding-small-vertical;
178
- padding-bottom: $padding-small-vertical;
179
- margin-left: -$padding-large-horizontal;
180
- margin-right: -$padding-large-horizontal;
181
- padding-left: $padding-large-horizontal;
182
- padding-right: $padding-large-horizontal;
183
- color: $color-gray-600;
184
- text-decoration: none;
185
-
186
- &:hover {
187
- color: $color-secondary;
188
- }
189
- }
190
-
191
- .navigation-account_dropdown-list-item-sign_out {
192
- color: $color-danger !important;
193
- }
194
-
195
- .navigation-account_dropdown-list-item:not(:last-of-type) {
196
- border-bottom: none;
197
- }
@@ -1,59 +0,0 @@
1
- $icon-to-text-alignment: -3px;
2
- $icon-to-text-alignment-alt: -2px;
3
- $cart-count-horizontal-position: -3px;
4
- $cart-count-horizontal-position-alt: -10px;
5
- $cart-count-vertical-position: -8px;
6
- $cart-count-size: 21px;
7
- $icon-size-break_to_md: 21px;
8
-
9
- //style the cart and help icon the same + override bootstrap
10
- .navbar-nav > li > a {
11
- &.navigation-user_info-icon {
12
- float: left; // ensures proper cart with count display in IE
13
- margin-top: $icon-to-text-alignment;
14
- background-color: inherit;
15
- @include transition($navigation-link-hover-transition);
16
-
17
- @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
18
- padding-right: 2px;
19
- padding-left: 2px;
20
- margin-top: $icon-to-text-alignment-alt;
21
- font-size: $icon-size-break_to_md;
22
- }
23
-
24
- &:hover .fa {
25
- color: $color-secondary;
26
- @include transition($navigation-link-hover-transition);
27
- }
28
-
29
- &.navigation-user_info-cart-with_count {
30
- @media (max-width: $grid-float-breakpoint-max) {
31
- padding-right: 0;
32
- }
33
- }
34
- }
35
- &.navigation-user_info-cart {
36
- @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
37
- margin-right: $cart-count-horizontal-position;
38
- }
39
- }
40
- &.navigation-user_info-cart-with_count {
41
- @media (min-width: $grid-float-breakpoint) and (max-width: $screen-md-max) {
42
- margin-right: $cart-count-horizontal-position-alt;
43
- }
44
- }
45
- }
46
-
47
-
48
-
49
- .navigation-user_info-cart-count {
50
- display: block;
51
- float: right;
52
- text-align: center;
53
- margin-top: $cart-count-vertical-position;
54
- margin-left: $cart-count-horizontal-position;
55
- padding-top: 1px; // shim for alignment
56
- width: $cart-count-size;
57
- height: $cart-count-size;
58
- border-radius: 50%;
59
- }
@@ -1,11 +0,0 @@
1
- #header-is_fixed {
2
- display: block;
3
- width: 100%;
4
- top: 0;
5
- left: 0;
6
- z-index: $zindex-navbar-fixed;
7
-
8
- &:not(.affix) {
9
- position: static; // respect the z-index of all the nav stuff + don't break small heroes like on the /find_ambassador page
10
- }
11
- }
@@ -1,53 +0,0 @@
1
- // Styling for Vertical Nav lists
2
- $header_active_border_height: 2px;
3
-
4
- .nav {
5
- &.nav-pills {
6
- @extend %card-style;
7
- }
8
-
9
- .nav-item {
10
- @include clearfix;
11
- font-family: $font-face-regular;
12
- font-size: $font-size-300;
13
-
14
- .nav-item-list {
15
- border: 0;
16
- height: $header_height;
17
- color: color('gray-500');
18
- }
19
- .nav-item-list {
20
- @include border_highlight("left", transparent);
21
- }
22
-
23
- // For styleguide primary nav icon + text style
24
- .nav-item-icon {
25
- font-size: $font-size-400;
26
- line-height: 20px;
27
- vertical-align: bottom;
28
- }
29
- .nav-item-label {
30
- line-height: 20px;
31
- }
32
-
33
- &:hover, &:focus {
34
- .nav-item-list {
35
- color: color('secondary');
36
- background-color: color('gray-100');
37
- }
38
- .nav-item-list {
39
- @include border_highlight("left");
40
- }
41
- }
42
-
43
- @at-root #{&}.active {
44
- .nav-item-list {
45
- color: color('gray-600');
46
- background-color: color('gray-100');
47
- border-top: 1px solid color('gray-300');
48
- border-bottom: 1px solid color('gray-300');
49
- @include border_highlight("left", color("primary"));
50
- }
51
- }
52
- }
53
- }
@@ -1,143 +0,0 @@
1
- $nav-icon_bar-width: 22px;
2
- $close-icon-offset: -5px;
3
- $mobile-menu-close-btn-height: 40px;
4
- $sign-up-btn-height: 30px;
5
- $sign-up-btn-top-margin: 10px;
6
- $sign-up-btn-top-padding: 8px;
7
-
8
- .nav-mobile-menu {
9
- @media (max-width: $grid-float-breakpoint-max) {
10
- @include off-canvas-style;
11
- display: flex;
12
- flex-direction: column;
13
- }
14
- }
15
-
16
- .navbar-user_info {
17
- @media (max-width: $grid-float-breakpoint-max) {
18
- max-height: none !important; // important overrides navbar bootstrap stuff
19
- order: 2; // .nav-mobile-menu-close: 1, .navbar-user_info: 2, .navbar-text_center: 3
20
-
21
- &.navbar-user_info-logged_out {
22
- order: 4;
23
- }
24
- }
25
- }
26
-
27
- .nav-mobile-menu-close {
28
- height: $mobile-menu-close-btn-height;
29
-
30
- @media (min-width: $grid-float-breakpoint) {
31
- display: none;
32
- }
33
-
34
- .navbar-toggle {
35
- margin-right: 0;
36
- }
37
- }
38
-
39
- .navbar-header {
40
- @media (max-width: $grid-float-breakpoint-max) {
41
- float: none;
42
- }
43
- }
44
-
45
- .navbar-toggle {
46
- @media (max-width: $grid-float-breakpoint-max) {
47
- display: block;
48
- }
49
- @media (max-width: $screen-md) {
50
- margin-right: -10px; // equalize padding between right-side icons
51
- }
52
-
53
- @media (max-width: $screen-xs-max) {
54
- margin-right: -12px;
55
- margin-left: -4px;
56
- }
57
-
58
- &:hover {
59
- .icon-bar {
60
- background-color: $color-secondary;
61
- }
62
- }
63
-
64
- // begin Hamburger
65
- .icon-bar {
66
- background-color: $color-gray-600;
67
- transition: all 0.2s;
68
- width: $nav-icon_bar-width;
69
- }
70
-
71
- .icon-bar-back_slash {
72
- margin-bottom: $close-icon-offset;
73
- transform: rotate(-45deg);
74
- }
75
-
76
- .icon-bar-forward_slash {
77
- transform: rotate(45deg);
78
- }
79
- }
80
-
81
- // Log In & Sign Up Buttons
82
- .navbar-nav > li {
83
- @media (max-width: $grid-float-breakpoint-max) {
84
- float: none;
85
- }
86
-
87
- &.nav-mobile-menu-btns {
88
- @media (max-width: $grid-float-breakpoint-max) {
89
- padding-right: 20px;
90
- padding-top: 10px;
91
- }
92
-
93
- &.nav-mobile-menu-signup {
94
- @media (min-width: $grid-float-breakpoint) {
95
- float: right!important; //put sign up out to right on desktop
96
- }
97
- }
98
-
99
- //customize both buttons to account for overall nav spacing
100
- a.btn {
101
- @media (min-width: $grid-float-breakpoint) {
102
- margin-top: 3px;
103
- padding-left: 7px;
104
- padding-right: 7px;
105
- font-size: $font-size-100;
106
- line-height: 1;
107
- }
108
-
109
- @media (max-width: $grid-float-breakpoint-max) {
110
- display: block;
111
- padding-top: 10px;
112
- }
113
- }
114
-
115
- .btn.btn-login {
116
- @media (min-width: $grid-float-breakpoint) {
117
- color: $color-gray-600;
118
- background-color: transparent;
119
- border-color: white;
120
- box-shadow: none;
121
-
122
- &:hover,
123
- &:focus,
124
- &:active,
125
- &:active:focus {
126
- color: $color-secondary;
127
- }
128
- }
129
- }
130
-
131
- .btn.btn-signup {
132
- @media (min-width: $grid-float-breakpoint) {
133
- height: $sign-up-btn-height;
134
- margin-top: $sign-up-btn-top-margin;
135
- padding-top: $sign-up-btn-top-padding;
136
- }
137
- &:focus {
138
- background-color: color('primary-dark');
139
- border-color: color('primary-dark');
140
- }
141
- }
142
- }
143
- }