forever_style_guide 3.1.1 → 3.1.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/forever_style_guide/_mars_manifest.scss +3 -0
- data/app/assets/stylesheets/forever_style_guide/base/_forms.scss +0 -5
- data/app/assets/stylesheets/forever_style_guide/base/_mars_manifest.scss +4 -0
- data/app/assets/stylesheets/forever_style_guide/base/_typography.scss +28 -0
- data/app/assets/stylesheets/forever_style_guide/globals/_breakpoints.scss +4 -4
- data/app/assets/stylesheets/forever_style_guide/globals/_mars_manifest.scss +29 -0
- data/app/assets/stylesheets/forever_style_guide/modules/_checkbox.scss +18 -0
- data/app/assets/stylesheets/forever_style_guide/modules/_mars_manifest.scss +23 -0
- data/app/assets/stylesheets/forever_style_guide/modules/_modal.scss +12 -4
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-account.scss +4 -2
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-ambassador.scss +9 -5
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns.scss +5 -0
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-icons.scss +46 -33
- data/app/assets/stylesheets/forever_style_guide/modules/_nav-offcanvas.scss +2 -2
- data/app/assets/stylesheets/forever_style_guide/modules/_nav.scss +28 -8
- data/app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown_menu.erb +4 -4
- data/app/views/forever_style_guide/sections/components/navigation/_nav_help_dropdown_menu.erb +2 -2
- data/lib/forever_style_guide/version.rb +1 -1
- metadata +6 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 08af5b50938257e08aa1a9f700ce4c39612c7ba9
|
|
4
|
+
data.tar.gz: 9f69edfa1dc8dccd2de917bf8c65e095b8c77088
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d042318a58c647c6135ec0e337468ecf9de3897eada7847148612695dc2ffb06d3704cefdb1aa7a1d31b8d80ba52cb83138afe12ae599354c0ec46aa58854841
|
|
7
|
+
data.tar.gz: ca94dad300936e5fdb8c6318790169531f62a0f042fead04271811f8e1fbddf7241ad6dab6874942e7bc4d0956f9198954789b3623e05fdb727cef020a06c98f
|
|
@@ -100,3 +100,31 @@ a {
|
|
|
100
100
|
color: color('secondary');
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
|
+
|
|
104
|
+
/*
|
|
105
|
+
mixin for multiline ellipsization
|
|
106
|
+
http://hackingui.com/front-end/a-pure-css-solution-for-multiline-text-truncation/
|
|
107
|
+
*/
|
|
108
|
+
@mixin multi_line_ellipsis($lineHeight: 1.1em, $lineCount: 3, $bgColor: $color-gray-700) {
|
|
109
|
+
overflow: hidden;
|
|
110
|
+
position: relative;
|
|
111
|
+
line-height: $lineHeight;
|
|
112
|
+
max-height: $lineHeight * $lineCount;
|
|
113
|
+
padding-right: 1em;
|
|
114
|
+
|
|
115
|
+
&:before {
|
|
116
|
+
content: '...';
|
|
117
|
+
position: absolute;
|
|
118
|
+
right: 0;
|
|
119
|
+
bottom: 0;
|
|
120
|
+
}
|
|
121
|
+
&:after {
|
|
122
|
+
content: '';
|
|
123
|
+
position: absolute;
|
|
124
|
+
right: 0;
|
|
125
|
+
width: 1em;
|
|
126
|
+
height: 1em;
|
|
127
|
+
margin-top: 0.2em;
|
|
128
|
+
background: $bgColor;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
@@ -8,9 +8,6 @@ $screen-xs: 480px !global;
|
|
|
8
8
|
$screen-xs-min: $screen-xs !global;
|
|
9
9
|
$screen-phone: $screen-xs-min !global;
|
|
10
10
|
|
|
11
|
-
// between xs & sm breakpoints
|
|
12
|
-
$screen-xs_to_sm: 580px !global;
|
|
13
|
-
|
|
14
11
|
// Small screen / tablet
|
|
15
12
|
$screen-sm: 768px !global;
|
|
16
13
|
$screen-sm-min: $screen-sm !global;
|
|
@@ -43,9 +40,12 @@ $screen-md-max: ($screen-lg-min - 1) !global;
|
|
|
43
40
|
$screen-lg-max: ($screen-xl-min - 1) !global;
|
|
44
41
|
$screen-xl-max: ($screen-xxl-min - 1) !global;
|
|
45
42
|
|
|
43
|
+
// Tweeners
|
|
44
|
+
$screen-xs_to_sm: 580px !global;
|
|
45
|
+
$screen-md_to_lg: 1060px !global;
|
|
46
46
|
|
|
47
47
|
//** Point at which the navbar becomes uncollapsed.
|
|
48
|
-
$grid-float-breakpoint:
|
|
48
|
+
$grid-float-breakpoint: 960px!global;
|
|
49
49
|
//** Point at which the navbar begins collapsing.
|
|
50
50
|
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !global;
|
|
51
51
|
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
@import "colors";
|
|
2
|
+
@import "fonts";
|
|
3
|
+
|
|
4
|
+
/* OVERRIDE FONT IMPORTS*/
|
|
5
|
+
$base-font-path: '' !default;
|
|
6
|
+
@mixin fontFace($family, $src) {
|
|
7
|
+
@font-face {
|
|
8
|
+
font-family: $family;
|
|
9
|
+
src: url('#{$base-font-path}/#{$src}.eot'); // IE9 compat
|
|
10
|
+
src: url('#{$base-font-path}/#{$src}.eot?#iefix') format('embedded-opentype'), // IE8 and below
|
|
11
|
+
url('#{$base-font-path}/#{$src}.woff') format('woff'), // standards
|
|
12
|
+
url('#{$base-font-path}/#{$src}.ttf') format('truetype'), // Safari, Android, iOS
|
|
13
|
+
url('#{$base-font-path}/#{$src}.svg##{$family}') format('svg'); // legacy iOS
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
@include fontFace('proxima_nova-light', 'ProximaNova-Light-webfont');
|
|
18
|
+
@include fontFace('proxima_nova-regular', 'ProximaNova-Reg-webfont');
|
|
19
|
+
@include fontFace('proxima_nova-semibold', 'ProximaNova-Sbold-webfont');
|
|
20
|
+
@include fontFace('proxima_nova-bold', 'ProximaNova-Bold-webfont');
|
|
21
|
+
@include fontFace('proxima_nova-regular_italic', 'ProximaNova-RegIt-webfont');
|
|
22
|
+
@include fontFace('proxima_nova-regular_bold_italic', 'ProximaNova-BoldIt-webfont');
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
@import "breakpoints";
|
|
26
|
+
@import "variables";
|
|
27
|
+
@import "mixins";
|
|
28
|
+
@import "effects";
|
|
29
|
+
@import "layout";
|
|
@@ -49,6 +49,24 @@ $checkbox_size: 20px;
|
|
|
49
49
|
border-color: $color-gray-500;
|
|
50
50
|
opacity: 1;
|
|
51
51
|
}
|
|
52
|
+
|
|
53
|
+
//start: for mars ui checkbox
|
|
54
|
+
//mars ui does not use or need a real checkbox, and instead simple adds a class to the label for checked and disabled states
|
|
55
|
+
//need better treatment for disabled.
|
|
56
|
+
&.checked:after {
|
|
57
|
+
@include checkbox($color-primary, color('primary-dark'));
|
|
58
|
+
opacity: 1;
|
|
59
|
+
}
|
|
60
|
+
&.disabled {
|
|
61
|
+
cursor: not-allowed;
|
|
62
|
+
}
|
|
63
|
+
&.disabled:after {}
|
|
64
|
+
&.disabled.checked:after {
|
|
65
|
+
@include checkbox($color-gray-400, $color-gray-500);
|
|
66
|
+
}
|
|
67
|
+
//end: for mars ui checbox
|
|
68
|
+
|
|
69
|
+
|
|
52
70
|
}
|
|
53
71
|
|
|
54
72
|
input[type=checkbox] {
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
@import "avatar";
|
|
2
|
+
@import "button";
|
|
3
|
+
@import "checkbox";
|
|
4
|
+
@import "dropdown-menu";
|
|
5
|
+
@import "fa-feature_bullet";
|
|
6
|
+
@import "impersonation_banner";
|
|
7
|
+
@import "input_groups";
|
|
8
|
+
@import "list";
|
|
9
|
+
@import "nav";
|
|
10
|
+
@import "nav-dropdowns";
|
|
11
|
+
@import "nav-dropdowns-account";
|
|
12
|
+
@import "nav-dropdowns-ambassador";
|
|
13
|
+
@import "nav-dropdowns-help";
|
|
14
|
+
@import "nav-fixed";
|
|
15
|
+
@import "nav-icons";
|
|
16
|
+
@import "nav-item-list";
|
|
17
|
+
@import "nav-offcanvas";
|
|
18
|
+
@import "progress";
|
|
19
|
+
@import "responsive_utilities";
|
|
20
|
+
@import "select";
|
|
21
|
+
@import "shame";
|
|
22
|
+
@import "modal";
|
|
23
|
+
@import "signin";
|
|
@@ -2,6 +2,8 @@ $modal-padding-footer: 15px;
|
|
|
2
2
|
$modal-form-width-lg: 355px;
|
|
3
3
|
$modal-product-suggestion-sm: 170px;
|
|
4
4
|
$modal-promo-height: 475px;
|
|
5
|
+
$modal-xl-screen-md-width: 900px;
|
|
6
|
+
$modal-xl-screen-lg-width: 1170px;
|
|
5
7
|
|
|
6
8
|
.modal-content {
|
|
7
9
|
border: none;
|
|
@@ -111,10 +113,6 @@ $modal-promo-height: 475px;
|
|
|
111
113
|
height: $modal-promo-height;
|
|
112
114
|
}
|
|
113
115
|
|
|
114
|
-
.modal-promo-sample {
|
|
115
|
-
background-image: url('modals/promobg.jpg');
|
|
116
|
-
}
|
|
117
|
-
|
|
118
116
|
.modal-promo-kit {
|
|
119
117
|
background-position: 50%;
|
|
120
118
|
image-rendering: -webkit-optimize-contrast; // fixes text-in-image fuzziness in Chrome
|
|
@@ -141,3 +139,13 @@ $modal-promo-height: 475px;
|
|
|
141
139
|
margin: 0 auto;
|
|
142
140
|
margin-top: 10px;
|
|
143
141
|
}
|
|
142
|
+
|
|
143
|
+
.modal-xl {
|
|
144
|
+
@media (min-width: $screen-md){
|
|
145
|
+
width: $modal-xl-screen-md-width;
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
@media (min-width: $screen-lg){
|
|
149
|
+
width: $modal-xl-screen-lg-width;
|
|
150
|
+
}
|
|
151
|
+
}
|
|
@@ -33,8 +33,10 @@
|
|
|
33
33
|
margin-top: 0;
|
|
34
34
|
border-color: color('gray-600');
|
|
35
35
|
}
|
|
36
|
-
.dropdown-menu-account-user {
|
|
37
|
-
|
|
36
|
+
.dropdown-menu-account-user-name {
|
|
37
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
38
|
+
@include multi_line_ellipsis($lineHeight: 1.1em, $lineCount: 3, $bgColor: $color-gray-700);
|
|
39
|
+
}
|
|
38
40
|
}
|
|
39
41
|
.dropdown-menu-account-user-intro {
|
|
40
42
|
margin-top: $padding-small-vertical;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
$ambassador-name-max-width:
|
|
2
|
-
$ambassador-name-max-width-
|
|
1
|
+
$ambassador-name-max-width: 228px;
|
|
2
|
+
$ambassador-name-max-width-md: 100px;
|
|
3
|
+
$ambassador-name-max-width-lg: 140px;
|
|
3
4
|
$distance-to-close-ambassador-text-gap: -3px;
|
|
4
5
|
|
|
5
6
|
.dropdown-ambassador {
|
|
@@ -58,14 +59,17 @@ $distance-to-close-ambassador-text-gap: -3px;
|
|
|
58
59
|
}
|
|
59
60
|
}
|
|
60
61
|
.dropdown-ambassador-primary_text {
|
|
61
|
-
max-width: $ambassador-name-max-width;
|
|
62
|
+
max-width: $ambassador-name-max-width; // managing points at which ambassador name is ellipsized
|
|
62
63
|
font-family: $font-face-gotham;
|
|
63
64
|
white-space: nowrap;
|
|
64
65
|
overflow: hidden;
|
|
65
66
|
text-overflow: ellipsis;
|
|
66
67
|
|
|
67
|
-
@media (
|
|
68
|
-
max-width: $ambassador-name-max-width-
|
|
68
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
69
|
+
max-width: $ambassador-name-max-width-md;
|
|
70
|
+
}
|
|
71
|
+
@media (min-width: $screen-md_to_lg) {
|
|
72
|
+
max-width: $ambassador-name-max-width-lg;
|
|
69
73
|
}
|
|
70
74
|
}
|
|
71
75
|
.dropdown-ambassador-edit_btn {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
$dropdown-height: 345px; // Allows for entire hero_simple text to display from $screen-md and up
|
|
2
2
|
$nav-icon-width: 60px;
|
|
3
3
|
$dropdown-spacer-height: 51px;
|
|
4
|
+
$dropdown-spacer-height-alt: 39px;
|
|
4
5
|
|
|
5
6
|
@mixin dropdown-content-style {
|
|
6
7
|
display: inline-block;
|
|
@@ -137,6 +138,10 @@ $dropdown-spacer-height: 51px;
|
|
|
137
138
|
|
|
138
139
|
.dropdown-menu-nav-spacer {
|
|
139
140
|
margin-top: $dropdown-spacer-height;
|
|
141
|
+
|
|
142
|
+
@media (min-width: $grid-float-breakpoint-max) and (max-width: $screen-lg) {
|
|
143
|
+
margin-top: $dropdown-spacer-height-alt;
|
|
144
|
+
}
|
|
140
145
|
}
|
|
141
146
|
|
|
142
147
|
.dropdown-menu-nav-extra_column {
|
|
@@ -1,24 +1,29 @@
|
|
|
1
1
|
$nav-icon-margin: 3px;
|
|
2
|
-
$
|
|
3
|
-
$
|
|
2
|
+
$icon-width: 28px;
|
|
3
|
+
$screen-below-xs: $screen-xs - 1;
|
|
4
|
+
|
|
5
|
+
// Cart + Count Positioning
|
|
6
|
+
$cart-count-offset: 6px;
|
|
7
|
+
$cart-count-offset-xs: 2px;
|
|
4
8
|
$cart-count-width: 20px;
|
|
5
|
-
$cart-count-width-
|
|
6
|
-
$cart-icon-xsmall-width: 30px + 10px; //10px to account for extra spacing
|
|
9
|
+
$cart-count-width-sm: 17px;
|
|
7
10
|
$cart-count-icon-overlap: 8px;
|
|
8
|
-
$icon-width:
|
|
9
|
-
$cart-tab-padding: 20px;
|
|
11
|
+
$cart-icon-width-xs: 30px + 10px; //10px to account for extra spacing
|
|
10
12
|
$cart-icon-vertical-offset: 7px;
|
|
11
13
|
$cart-icon-vertical-offset-mobile: 4px;
|
|
14
|
+
$cart-tab-padding: 20px;
|
|
15
|
+
$cart-tab-padding-md_to_lg: 7px;
|
|
16
|
+
|
|
17
|
+
// Deals Star Positioning
|
|
12
18
|
$deals-icon-horizontal-offset: 3px;
|
|
13
19
|
$deals-icon-horizontal-offset-mobile: 4px;
|
|
14
|
-
$chevron-bottom-alignment-offset: 15px;
|
|
15
|
-
$chevron-right-alignment-offset: 5px;
|
|
16
|
-
$screen-below-xs: $screen-xs - 1;
|
|
17
20
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
// Chevron Icon Positioning
|
|
22
|
+
$chevron-bottom-offset: 15px;
|
|
23
|
+
$chevron-bottom-offset-alt: 17px;
|
|
24
|
+
$chevron-right-offset: 5px;
|
|
25
|
+
$chevron-right-offset-alt: 2px;
|
|
26
|
+
$chevron-font-size-xxs: 8px;
|
|
22
27
|
|
|
23
28
|
.nav-icon-stack {
|
|
24
29
|
padding: 3px 4px 4px 4px !important; // overriding .navbar-nav > li > a
|
|
@@ -41,7 +46,6 @@ $screen-below-xs: $screen-xs - 1;
|
|
|
41
46
|
&:first-of-type {
|
|
42
47
|
margin-top: 1px;
|
|
43
48
|
}
|
|
44
|
-
|
|
45
49
|
&:last-of-type {
|
|
46
50
|
margin-bottom: 3px;
|
|
47
51
|
}
|
|
@@ -60,12 +64,16 @@ $screen-below-xs: $screen-xs - 1;
|
|
|
60
64
|
@include transition(transform 0.2s ease-in-out);
|
|
61
65
|
|
|
62
66
|
@media(max-width: $grid-float-breakpoint-max) {
|
|
63
|
-
|
|
67
|
+
right: 15px;
|
|
68
|
+
font-size: $font-size-default;
|
|
64
69
|
}
|
|
65
|
-
|
|
66
70
|
@media(min-width: $grid-float-breakpoint) {
|
|
67
|
-
|
|
68
|
-
|
|
71
|
+
bottom: $chevron-bottom-offset;
|
|
72
|
+
}
|
|
73
|
+
@media (min-width: $grid-float-breakpoint){
|
|
74
|
+
right: $chevron-right-offset;
|
|
75
|
+
bottom: $chevron-bottom-offset-alt;
|
|
76
|
+
font-size: $chevron-font-size-xxs;
|
|
69
77
|
}
|
|
70
78
|
}
|
|
71
79
|
.dropdown.open .dropdown-toggle .fa-chevron-down {
|
|
@@ -88,6 +96,10 @@ a.cart-icon {
|
|
|
88
96
|
border-radius: 0;
|
|
89
97
|
z-index: $zindex-navbar-fixed; // make sure toggles appear above logo
|
|
90
98
|
|
|
99
|
+
@media (min-width: $grid-float-breakpoint-max) and (max-width: $screen-lg) {
|
|
100
|
+
width: $icon-width + $cart-tab-padding-md_to_lg;
|
|
101
|
+
}
|
|
102
|
+
|
|
91
103
|
&:hover,
|
|
92
104
|
&:active,
|
|
93
105
|
&:focus {
|
|
@@ -110,12 +122,12 @@ a.cart-icon {
|
|
|
110
122
|
&.with-count {
|
|
111
123
|
width: $cart-count-width + $icon-width + $cart-tab-padding;
|
|
112
124
|
|
|
113
|
-
@media (
|
|
114
|
-
width: $cart-count-width + $icon-width - $cart-count-icon-overlap
|
|
125
|
+
@media (min-width: $grid-float-breakpoint-max) and (max-width: $screen-lg) {
|
|
126
|
+
width: $cart-count-width + $icon-width - $cart-count-icon-overlap;
|
|
127
|
+
text-align: left;
|
|
115
128
|
}
|
|
116
|
-
|
|
117
129
|
@media (max-width: $screen-below-xs) {
|
|
118
|
-
width: $cart-count-width + $cart-icon-
|
|
130
|
+
width: $cart-count-width + $cart-icon-width-xs;
|
|
119
131
|
}
|
|
120
132
|
}
|
|
121
133
|
}
|
|
@@ -123,12 +135,11 @@ a.cart-icon {
|
|
|
123
135
|
a.cart-icon {
|
|
124
136
|
padding-top: $cart-icon-vertical-offset-mobile;
|
|
125
137
|
|
|
126
|
-
@media (max-width: $
|
|
138
|
+
@media (max-width: $screen-lg-min) {
|
|
127
139
|
position: absolute;
|
|
128
140
|
right: 0;
|
|
129
141
|
}
|
|
130
|
-
|
|
131
|
-
@media(min-width: $grid-float-breakpoint) {
|
|
142
|
+
@media (min-width: $screen-md_to_lg) {
|
|
132
143
|
padding-top: $cart-icon-vertical-offset !important; //override .nav.navbar-nav > li > a
|
|
133
144
|
}
|
|
134
145
|
}
|
|
@@ -140,24 +151,26 @@ a.cart-icon {
|
|
|
140
151
|
min-width: $cart-count-width;
|
|
141
152
|
padding-top: 1px; // vertical align number in circle
|
|
142
153
|
font-size: $font-size-200;
|
|
154
|
+
text-align: center;
|
|
143
155
|
border-radius: 50%;
|
|
144
156
|
|
|
145
157
|
@media (max-width: $screen-below-xs) {
|
|
146
|
-
margin-right: $cart-count-
|
|
158
|
+
margin-right: $cart-count-offset-xs;
|
|
147
159
|
}
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
margin-right: $cart-count-mobile-offset;
|
|
160
|
+
@media (min-width: $screen-xs) and (max-width: $screen-lg) {
|
|
161
|
+
margin-right: $cart-count-offset;
|
|
151
162
|
}
|
|
152
|
-
|
|
153
|
-
|
|
163
|
+
@media (min-width: $grid-float-breakpoint-max) and (max-width: $screen-lg) {
|
|
164
|
+
padding-top: 0;
|
|
165
|
+
}
|
|
166
|
+
@media (max-width: $screen-lg) {
|
|
154
167
|
position: absolute;
|
|
155
168
|
right: 3px;
|
|
156
169
|
top: 2px;
|
|
157
170
|
margin-right: 0;
|
|
158
171
|
margin-top: 0;
|
|
159
|
-
min-width: $cart-count-width-
|
|
160
|
-
height: $cart-count-width-
|
|
172
|
+
min-width: $cart-count-width-sm;
|
|
173
|
+
height: $cart-count-width-sm;
|
|
161
174
|
font-size: $font-size-100;
|
|
162
175
|
box-shadow: 0px 0px 0px 2px white;
|
|
163
176
|
}
|
|
@@ -17,12 +17,12 @@ $offcanvas-animation-time: .15s !default;
|
|
|
17
17
|
.navbar-offcanvas {
|
|
18
18
|
position: fixed;
|
|
19
19
|
width: 100%;
|
|
20
|
-
min-height: 100%; // Ensure offcanvas menu ignores mobile-safari's padding garbage
|
|
21
20
|
max-width: $offcanvas-width;
|
|
22
21
|
left: -$offcanvas-width;
|
|
23
22
|
top: 0;
|
|
23
|
+
bottom: 0;
|
|
24
24
|
z-index: $zindex-navbar-fixed + 1; // Make sure offcanvas nav is 'above' fixed header
|
|
25
|
-
overflow:
|
|
25
|
+
overflow-y: auto;
|
|
26
26
|
-webkit-overflow-scrolling: touch;
|
|
27
27
|
transition: left $offcanvas-animation-time ease-in;
|
|
28
28
|
|
|
@@ -2,6 +2,11 @@ $offcanvas-width: 270px;
|
|
|
2
2
|
$offcanvas-padding: 10px;
|
|
3
3
|
$nav-bg-color: color('gray-700');
|
|
4
4
|
|
|
5
|
+
$nav-li-a-padding-base: 4px;
|
|
6
|
+
$nav-li-a-padding-right-desktop: 20px;
|
|
7
|
+
$nav-li-a-padding-right-md_to_lg: 14px;
|
|
8
|
+
$nav-li-a-padding-right-lg: 16px;
|
|
9
|
+
|
|
5
10
|
@mixin nav-border($sides...) {
|
|
6
11
|
@each $side in $sides {
|
|
7
12
|
border-#{$side}: 1px solid color('gray-400');
|
|
@@ -72,21 +77,36 @@ $nav-bg-color: color('gray-700');
|
|
|
72
77
|
@include nav-border(top);
|
|
73
78
|
border-color: color('gray-600')
|
|
74
79
|
}
|
|
75
|
-
|
|
76
|
-
@media (min-width: $grid-float-breakpoint) {
|
|
80
|
+
@media (min-width: $grid-float-breakpoint-max) {
|
|
77
81
|
position: relative;
|
|
78
82
|
color: color('gray-600');
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
+
}
|
|
84
|
+
@media (min-width: $grid-float-breakpoint-max) and (max-width: $screen-md_to_lg) {
|
|
85
|
+
padding-left: $nav-li-a-padding-base;
|
|
86
|
+
padding-right: $nav-li-a-padding-base;
|
|
87
|
+
}
|
|
88
|
+
@media (min-width: $screen-md_to_lg) and (max-width: $screen-lg-min) {
|
|
89
|
+
padding-left: $nav-li-a-padding-base * 2;
|
|
90
|
+
padding-right: $nav-li-a-padding-base * 2;
|
|
83
91
|
}
|
|
84
92
|
&:hover {
|
|
85
|
-
@media (min-width: $grid-float-breakpoint) {
|
|
93
|
+
@media (min-width: $grid-float-breakpoint-max) {
|
|
86
94
|
background-color: color('gray-300');
|
|
87
95
|
}
|
|
88
96
|
}
|
|
89
|
-
|
|
97
|
+
&.dropdown-toggle {
|
|
98
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
99
|
+
padding-right: $nav-li-a-padding-right-desktop;
|
|
100
|
+
}
|
|
101
|
+
@media (min-width: $grid-float-breakpoint) and (max-width: $screen-md_to_lg) {
|
|
102
|
+
padding-left: $nav-li-a-padding-base;
|
|
103
|
+
padding-right: $nav-li-a-padding-right-md_to_lg;
|
|
104
|
+
}
|
|
105
|
+
@media (min-width: $screen-md_to_lg) and (max-width: $screen-lg) {
|
|
106
|
+
padding-left: $nav-li-a-padding-base + 2;
|
|
107
|
+
padding-right: $nav-li-a-padding-right-lg;
|
|
108
|
+
}
|
|
109
|
+
}
|
|
90
110
|
}
|
|
91
111
|
.dropdown.open > .dropdown-toggle {
|
|
92
112
|
color: color('white');
|
data/app/views/forever_style_guide/sections/components/navigation/_nav_account_dropdown_menu.erb
CHANGED
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
|
|
13
13
|
<div class="dropdown-menu-account-user">
|
|
14
14
|
<p class="dropdown-menu-account-user-intro color-gray-300">Signed in as</p>
|
|
15
|
-
<h4 class="page-title color-gray-300"><%= current_user.name %></h4>
|
|
15
|
+
<h4 class="dropdown-menu-account-user-name page-title color-gray-300"><%= current_user.name %></h4>
|
|
16
16
|
</div>
|
|
17
17
|
</li>
|
|
18
18
|
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
<% end %>
|
|
30
30
|
</li>
|
|
31
31
|
|
|
32
|
-
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin
|
|
32
|
+
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-grid-float-breakpoint"></li>
|
|
33
33
|
<% end %>
|
|
34
34
|
|
|
35
35
|
<li class="dropdown-menu-account-item <%= 'hide' if current_user.superadmin? %>">
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
<i class='fa fa-suitcase fa-fw'></i>My Back Office
|
|
51
51
|
<% end %>
|
|
52
52
|
</li>
|
|
53
|
-
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin
|
|
53
|
+
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-grid-float-breakpoint"></li>
|
|
54
54
|
<% end %>
|
|
55
55
|
|
|
56
56
|
<li class="dropdown-menu-account-item">
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
<% end %>
|
|
78
78
|
</li>
|
|
79
79
|
|
|
80
|
-
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin
|
|
80
|
+
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-grid-float-breakpoint"></li>
|
|
81
81
|
|
|
82
82
|
<li class="dropdown-menu-account-item">
|
|
83
83
|
|
data/app/views/forever_style_guide/sections/components/navigation/_nav_help_dropdown_menu.erb
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
<% end %>
|
|
12
12
|
</li>
|
|
13
13
|
|
|
14
|
-
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-
|
|
14
|
+
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-grid-float-breakpoint"></li>
|
|
15
15
|
|
|
16
16
|
<li class="dropdown-menu-account-item l-section-close">
|
|
17
17
|
<%= link_to "mailto:support@forever.com", class: 'dropdown-menu-nav-link dropdown-menu-nav-link-no_margin', title: 'Email Customer Support' do %>
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
<% end %>
|
|
20
20
|
</li>
|
|
21
21
|
|
|
22
|
-
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-
|
|
22
|
+
<li class="dropdown-menu-account-divider dropdown-menu-account-divider-thin hidden-grid-float-breakpoint"></li>
|
|
23
23
|
|
|
24
24
|
<li class="dropdown-menu-account-item l-section-close">
|
|
25
25
|
<%= link_to help_center_url, class: 'dropdown-menu-nav-link dropdown-menu-nav-link-no_margin', title: 'Search the Forever Help Center', target: '_blank' do %>
|
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.1.
|
|
4
|
+
version: 3.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Nicholas McClay
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2017-
|
|
11
|
+
date: 2017-02-13 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -220,10 +220,12 @@ files:
|
|
|
220
220
|
- app/assets/javascripts/forever_style_guide/application.js
|
|
221
221
|
- app/assets/javascripts/forever_style_guide/offcanvas.js
|
|
222
222
|
- app/assets/stylesheets/forever_style_guide/_all.scss
|
|
223
|
+
- app/assets/stylesheets/forever_style_guide/_mars_manifest.scss
|
|
223
224
|
- app/assets/stylesheets/forever_style_guide/base/_all.scss
|
|
224
225
|
- app/assets/stylesheets/forever_style_guide/base/_bootstrap_reset.scss
|
|
225
226
|
- app/assets/stylesheets/forever_style_guide/base/_forms.scss
|
|
226
227
|
- app/assets/stylesheets/forever_style_guide/base/_gotham.scss
|
|
228
|
+
- app/assets/stylesheets/forever_style_guide/base/_mars_manifest.scss
|
|
227
229
|
- app/assets/stylesheets/forever_style_guide/base/_typography.scss
|
|
228
230
|
- app/assets/stylesheets/forever_style_guide/globals/_all.scss
|
|
229
231
|
- app/assets/stylesheets/forever_style_guide/globals/_breakpoints.scss
|
|
@@ -231,6 +233,7 @@ files:
|
|
|
231
233
|
- app/assets/stylesheets/forever_style_guide/globals/_effects.scss
|
|
232
234
|
- app/assets/stylesheets/forever_style_guide/globals/_fonts.scss
|
|
233
235
|
- app/assets/stylesheets/forever_style_guide/globals/_layout.scss
|
|
236
|
+
- app/assets/stylesheets/forever_style_guide/globals/_mars_manifest.scss
|
|
234
237
|
- app/assets/stylesheets/forever_style_guide/globals/_mixins.scss
|
|
235
238
|
- app/assets/stylesheets/forever_style_guide/globals/_variables.scss
|
|
236
239
|
- app/assets/stylesheets/forever_style_guide/modules/_all.scss
|
|
@@ -246,6 +249,7 @@ files:
|
|
|
246
249
|
- app/assets/stylesheets/forever_style_guide/modules/_impersonation_banner.scss
|
|
247
250
|
- app/assets/stylesheets/forever_style_guide/modules/_input_groups.scss
|
|
248
251
|
- app/assets/stylesheets/forever_style_guide/modules/_list.scss
|
|
252
|
+
- app/assets/stylesheets/forever_style_guide/modules/_mars_manifest.scss
|
|
249
253
|
- app/assets/stylesheets/forever_style_guide/modules/_modal.scss
|
|
250
254
|
- app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-account.scss
|
|
251
255
|
- app/assets/stylesheets/forever_style_guide/modules/_nav-dropdowns-ambassador.scss
|