viniBaxter-spa_landing 10.0 → 11

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/.DS_Store +0 -0
  3. data/lib/viniBaxter/sass/bootstrap/_buttons.scss +27 -8
  4. data/lib/viniBaxter/sass/bootstrap/_grid.scss +10 -0
  5. data/lib/viniBaxter/sass/bootstrap/_reboot.scss +1 -0
  6. data/lib/viniBaxter/sass/bootstrap/bootstrap.scss +1 -1
  7. data/lib/viniBaxter/sass/spa_landing-basic-nav.scss +3 -0
  8. data/lib/viniBaxter/sass/spa_landing-nav.scss +3 -0
  9. data/lib/viniBaxter/sass/spa_landing/theme/_both_gems.scss +1 -0
  10. data/lib/viniBaxter/sass/spa_landing/theme/_buttons.scss +9 -13
  11. data/lib/viniBaxter/sass/spa_landing/theme/_dropdown-extend.scss +1 -1
  12. data/lib/viniBaxter/sass/spa_landing/theme/_dropdown_creative.scss +6 -6
  13. data/lib/viniBaxter/sass/spa_landing/theme/{_landin-page.scss → _landind-page.scss} +2 -2
  14. data/lib/viniBaxter/sass/spa_landing/theme/_mixins.scss +1 -0
  15. data/lib/viniBaxter/sass/spa_landing/theme/_theme.scss +1 -1
  16. data/lib/viniBaxter/sass/spa_landing/theme/_type.scss +56 -7
  17. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_banking.scss +17 -0
  18. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_class-added-with-javascript.scss +15 -0
  19. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_custom_modals.scss +115 -0
  20. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_flatpickr.scss +120 -0
  21. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_flex-container-logic.scss +87 -0
  22. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_footer-links-map.scss +8 -0
  23. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_form-search.scss +34 -0
  24. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_hiw.scss +49 -0
  25. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_index.scss +13 -0
  26. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_jumbotron-logic.scss +1 -0
  27. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_key-frame.scss +9 -0
  28. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_mission.scss +6 -0
  29. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/_mixins.scss +38 -0
  30. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/flatpickr/fatpickr_mixins.scss +99 -0
  31. data/lib/viniBaxter/sass/spa_landing/theme/both_gems/jumbotrons/_jubo-home.scss +154 -0
  32. data/lib/viniBaxter/sass/spa_landing/theme/hidden/_hidden-down.scss +43 -0
  33. data/lib/viniBaxter/sass/spa_landing/theme/hidden/_index.scss +13 -0
  34. data/lib/viniBaxter/sass/spa_landing/theme/hidden/_show-down.scss +57 -0
  35. data/lib/viniBaxter/sass/spa_landing/theme/hidden/_show.scss +122 -0
  36. data/lib/viniBaxter/sass/spa_landing/theme/mixins/_colored_block.scss +78 -0
  37. data/lib/viniBaxter/sass/spa_landing/theme/utilities/_overlay.scss +23 -6
  38. data/lib/viniBaxter/spa_landing/version.rb +1 -1
  39. metadata +25 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: b3462abbf178ddf4bcc88b0fac22687c60c528268f53c2974be75f0a470d78f4
4
- data.tar.gz: 2e5e08996b11a990799d0207438909cd47b664053eda472725482250b4e6e944
3
+ metadata.gz: 662ad35185effdd8817095b45177eccbcbb61306cfe6324c07d10c59900eddda
4
+ data.tar.gz: 7764bc029519deb97611af806965237ddddd0b33ec24e293fb0da1057b25440b
5
5
  SHA512:
6
- metadata.gz: c00890da8475a26897d48bebf26077de9742ccccd5d926fa1ddb9cf73e6068e52bb36145918cb51cb537ed64aecf4edabbd5c66c1259ab4276d277fb08889094
7
- data.tar.gz: 3d1555ead2fb5c8fcfb0960fcdd79abf0cd588fd05536313fb7a5bb841d13f93c6fb9f69bfdc55ffda7152423c407044e0db73ce3768fc5583ab08c9fd52fd64
6
+ metadata.gz: c239bd3b6fe944a3121898c4d26fb1f2862f0c567e89ac354f6f75bb0b92ea4d19e53014409c6ce7434b8189cfeac42ce7818fa06e69ddad5d18e6827334b0ba
7
+ data.tar.gz: 3f959dc816395ebfdcccdb92b22b7b1cf64251d0814ab180fb7fd29ff01e2ab062ebacd58182048d107376c674836c84b1d4e45433c99c6290f6c1880c814318
Binary file
@@ -55,6 +55,10 @@
55
55
  }
56
56
  }
57
57
  }
58
+
59
+ &.long {
60
+ padding: $btn-padding-y $btn-padding-x * 2;
61
+ }
58
62
  }
59
63
 
60
64
  // Future-proof disabling of clicks on `<a>` elements
@@ -80,16 +84,31 @@ fieldset:disabled a.btn {
80
84
  }
81
85
 
82
86
  // Gradient
87
+ @mixin local_mixin_for_gradient_active($color) {
88
+ @include set-gradient-button($color);
89
+ color: $light;
90
+ // background-size: 300% 100%;
91
+ transition: all 0.4s ease-in-out;
92
+ border: 0px solid transparent !important;
93
+ &:hover {
94
+ background-position: 100% 0;
95
+ transition: all 0.4s ease-in-out;
96
+ color: $light;
97
+ }
98
+ }
99
+
83
100
  @each $color, $value in $theme-gradient-colors {
84
101
  .btn-gradient-#{$color} {
85
- @include set-gradient-button($color);
86
- color: $light;
87
- // background-size: 300% 100%;
88
- transition: all 0.4s ease-in-out;
89
- &:hover {
90
- background-position: 100% 0;
91
- transition: all 0.4s ease-in-out;
92
- color: $light;
102
+ @include local_mixin_for_gradient_active($color);
103
+ &[aria-selected='true'] {
104
+ border: 1px solid #fff !important;
105
+ }
106
+ &[aria-selected='false'] {
107
+ // display: none !important;
108
+ // @include button-outline-variant($value);
109
+ background: #fff !important;
110
+ border: 1px solid #454545 !important;
111
+ color: #454545 !important;
93
112
  }
94
113
  }
95
114
  }
@@ -19,6 +19,9 @@
19
19
  @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
20
20
  %responsive-container-#{$breakpoint} {
21
21
  max-width: $container-max-width;
22
+ &.container-nav-bar {
23
+ max-width: $container-max-width * 1.2;
24
+ }
22
25
  }
23
26
 
24
27
  // Extend each breakpoint which is smaller or equal to the current breakpoint
@@ -38,6 +41,13 @@
38
41
  }
39
42
  }
40
43
  }
44
+
45
+ .container-full-xs {
46
+ @include media-breakpoint-down(md) {
47
+ max-width: 100vw !important;
48
+ padding: 0px !important;
49
+ }
50
+ }
41
51
  }
42
52
 
43
53
  // Row
@@ -65,6 +65,7 @@ body {
65
65
  padding-top: $padding-body-lg-fixed-nav;
66
66
  }
67
67
 
68
+ a,
68
69
  p {
69
70
  font-weight: $font-weight-light;
70
71
  @include font-size($paragraph-font-size);
@@ -26,7 +26,7 @@
26
26
  @import 'breadcrumb';
27
27
  @import 'pagination';
28
28
  @import 'badge';
29
- @import 'jumbotron';
29
+ // @import 'jumbotron';
30
30
  @import 'alert';
31
31
  @import 'progress';
32
32
  @import 'media';
@@ -6,3 +6,6 @@
6
6
 
7
7
  // Theme core
8
8
  @import 'spa_landing/theme/theme-basic-nav';
9
+
10
+ // commun for both gems
11
+ @import 'spa_landing/theme/both_gems';
@@ -6,3 +6,6 @@
6
6
 
7
7
  // Theme core
8
8
  @import 'spa_landing/theme/theme';
9
+
10
+ // commun for both gems
11
+ @import 'spa_landing/theme/both_gems';
@@ -0,0 +1 @@
1
+ @import 'both_gems/index';
@@ -8,11 +8,11 @@
8
8
  width: auto;
9
9
  }
10
10
 
11
- .btn:not([class*="btn-outline"]) {
12
- border-color: transparent !important;
11
+ .btn:not([class*='btn-outline']) {
12
+ // border-color: transparent !important;
13
+ border-color: transparent;
13
14
  }
14
15
 
15
-
16
16
  // Sizing
17
17
 
18
18
  .btn-xs {
@@ -20,7 +20,6 @@
20
20
  font-size: $input-btn-font-size-xs;
21
21
  }
22
22
 
23
-
24
23
  // Custom colors
25
24
 
26
25
  .btn-white {
@@ -50,16 +49,16 @@
50
49
  }
51
50
 
52
51
  .btn-gray-300-20 {
53
- background-color: rgba($gray-300, .2);
52
+ background-color: rgba($gray-300, 0.2);
54
53
  color: $white;
55
54
 
56
55
  @include hover-focus {
57
- background-color: rgba($gray-300, .25);
56
+ background-color: rgba($gray-300, 0.25);
58
57
  color: $white;
59
58
  }
60
59
 
61
60
  &.active {
62
- background-color: rgba($gray-300, .25);
61
+ background-color: rgba($gray-300, 0.25);
63
62
  color: $white;
64
63
  }
65
64
  }
@@ -80,16 +79,16 @@
80
79
  }
81
80
 
82
81
  .btn-gray-400-10 {
83
- background-color: rgba($gray-400, .1);
82
+ background-color: rgba($gray-400, 0.1);
84
83
  color: $white;
85
84
 
86
85
  @include hover-focus {
87
- background-color: rgba($gray-400, .15);
86
+ background-color: rgba($gray-400, 0.15);
88
87
  color: $white;
89
88
  }
90
89
 
91
90
  &.active {
92
- background-color: rgba($gray-400, .15);
91
+ background-color: rgba($gray-400, 0.15);
93
92
  color: $white;
94
93
  }
95
94
  }
@@ -128,7 +127,6 @@
128
127
  }
129
128
  }
130
129
 
131
-
132
130
  // Soft variants
133
131
 
134
132
  @each $color, $value in $theme-colors {
@@ -137,14 +135,12 @@
137
135
  }
138
136
  }
139
137
 
140
-
141
138
  // Pill
142
139
 
143
140
  .btn-pill {
144
141
  border-radius: $rounded-pill;
145
142
  }
146
143
 
147
-
148
144
  // Rounded circle
149
145
 
150
146
  .btn-rounded-circle {
@@ -37,7 +37,7 @@
37
37
  bottom: -5px;
38
38
  right: auto;
39
39
  left: 10px;
40
- color: $white-color;
40
+ color: $light;
41
41
  border-top: 0.4em solid;
42
42
  border-right: 0.4em solid transparent;
43
43
  border-left: 0.4em solid transparent;
@@ -62,7 +62,7 @@
62
62
  top: -5px;
63
63
  left: 10px;
64
64
  right: auto;
65
- color: $white-color;
65
+ color: $light;
66
66
  border-bottom: 0.4em solid;
67
67
  border-right: 0.4em solid transparent;
68
68
  border-left: 0.4em solid transparent;
@@ -83,7 +83,7 @@
83
83
  @include dropdown-colors(
84
84
  darken($primary-color, 3%),
85
85
  $opacity-8,
86
- $white-color,
86
+ $light,
87
87
  $opacity-2
88
88
  );
89
89
  }
@@ -92,7 +92,7 @@
92
92
  @include dropdown-colors(
93
93
  darken($info-color, 3%),
94
94
  $opacity-8,
95
- $white-color,
95
+ $light,
96
96
  $opacity-2
97
97
  );
98
98
  }
@@ -101,7 +101,7 @@
101
101
  @include dropdown-colors(
102
102
  darken($danger-color, 3%),
103
103
  $opacity-8,
104
- $white-color,
104
+ $light,
105
105
  $opacity-2
106
106
  );
107
107
  }
@@ -110,7 +110,7 @@
110
110
  @include dropdown-colors(
111
111
  darken($success-color, 3%),
112
112
  $opacity-8,
113
- $white-color,
113
+ $light,
114
114
  $opacity-2
115
115
  );
116
116
  }
@@ -119,7 +119,7 @@
119
119
  @include dropdown-colors(
120
120
  darken($warning-color, 3%),
121
121
  $opacity-8,
122
- $white-color,
122
+ $light,
123
123
  $opacity-2
124
124
  );
125
125
  }
@@ -1,5 +1,5 @@
1
- .lp_jumbo {
2
- .container-lp-center {
1
+ .wrapper-overlay {
2
+ .overlay-text-respons {
3
3
  margin-left: auto !important;
4
4
  margin-right: auto !important;
5
5
  width: auto !important;
@@ -10,3 +10,4 @@
10
10
  @import 'mixins/vendor-prefixes';
11
11
  @import 'mixins/dropdown';
12
12
  @import 'mixins/navbar';
13
+ @import 'mixins/colored_block';
@@ -53,7 +53,7 @@
53
53
  @import 'section';
54
54
  @import 'shapes';
55
55
  @import 'sidenav';
56
- @import 'landin-page';
56
+ @import 'landind-page';
57
57
 
58
58
  //
59
59
  // iOS
@@ -81,10 +81,20 @@ h6,
81
81
  line-height: $display1-line-height;
82
82
  letter-spacing: $display1-letter-spacing;
83
83
 
84
- @include media-breakpoint-down(md) {
85
- font-size: $display1-size-md !important;
86
- line-height: $display1-line-height-size-md !important;
87
- letter-spacing: $display1-line-letter-spacing-md !important;
84
+ // @include media-breakpoint-down(md) {
85
+ // font-size: $display1-size-md !important;
86
+ // line-height: $display1-line-height-size-md !important;
87
+ // letter-spacing: $display1-line-letter-spacing-md !important;
88
+ // }
89
+ @include media-breakpoint-down(sm) {
90
+ font-size: $display1-size-sm !important;
91
+ line-height: $display1-line-height-size-sm !important;
92
+ letter-spacing: $display1-line-letter-spacing-sm !important;
93
+ }
94
+ @include media-breakpoint-down(xs) {
95
+ font-size: $display1-size-xs !important;
96
+ line-height: $display1-line-height-xs !important;
97
+ letter-spacing: $display1-line-letter-spacing-xs !important;
88
98
  }
89
99
  }
90
100
 
@@ -93,7 +103,9 @@ h6,
93
103
  letter-spacing: $display2-letter-spacing;
94
104
 
95
105
  @include media-breakpoint-down(md) {
96
- font-size: $display2-size-md;
106
+ font-size: $display2-size-sm;
107
+ line-height: $display2-line-height-size-sm !important;
108
+ letter-spacing: $display2-line-letter-spacing-sm;
97
109
  }
98
110
  }
99
111
 
@@ -102,7 +114,10 @@ h6,
102
114
  letter-spacing: $display3-letter-spacing;
103
115
 
104
116
  @include media-breakpoint-down(md) {
105
- font-size: $display3-size-md;
117
+ font-size: $display3-size-sm;
118
+ line-height: $display3-line-height-size-sm !important;
119
+ letter-spacing: $display3-line-letter-spacing-sm;
120
+ font-weight: $display3-weight-sm;
106
121
  }
107
122
  }
108
123
 
@@ -111,10 +126,44 @@ h6,
111
126
  letter-spacing: $display4-letter-spacing;
112
127
 
113
128
  @include media-breakpoint-down(md) {
114
- font-size: $display4-size-md;
129
+ font-size: $display4-size-sm;
130
+ line-height: $display4-line-height-size-sm !important;
131
+ letter-spacing: $display4-line-letter-spacing-sm;
132
+ font-weight: $display4-weight-sm;
115
133
  }
116
134
  }
117
135
 
136
+ // display rules on xs screen
137
+
138
+ .display-xs-1 {
139
+ font-size: $display1-size-xs;
140
+ font-weight: $display1-weight-xs;
141
+ line-height: $display1-line-height-xs;
142
+ letter-spacing: $display1-line-letter-spacing-xs;
143
+ }
144
+ .display-xs-2 {
145
+ font-size: $display2-size-xs;
146
+ font-weight: $display2-weight-xs;
147
+ line-height: $display2-line-height-xs;
148
+ letter-spacing: $display2-line-letter-spacing-xs;
149
+ }
150
+ .display-xs-3 {
151
+ font-size: $display3-size-xs;
152
+ font-weight: $display3-weight-xs;
153
+ line-height: $display3-line-height-xs;
154
+ }
155
+ .display-xs-4 {
156
+ font-size: $display4-size-xs;
157
+ font-weight: $display4-weight-xs;
158
+ line-height: $display4-line-height-xs;
159
+ }
160
+ .display-xs-p {
161
+ font-size: $display-p-size-xs;
162
+ font-weight: $display-p-weight-xs;
163
+ line-height: $display-p-line-height-xs;
164
+ letter-spacing: $display-p-line-letter-spacing-xs;
165
+ }
166
+
118
167
  // Lead
119
168
 
120
169
  .lead {
@@ -0,0 +1,17 @@
1
+ .banking {
2
+ width: 100%;
3
+ display: flex;
4
+ align-items: center;
5
+ justify-content: center;
6
+ height: 100%;
7
+
8
+ img {
9
+ width: 30%;
10
+ }
11
+
12
+ div {
13
+ img {
14
+ width: 60%;
15
+ }
16
+ }
17
+ }
@@ -0,0 +1,15 @@
1
+ // on xs only when user click on
2
+ // form to find place
3
+
4
+ @include media-breakpoint-down(xs) {
5
+ #content {
6
+ opacity: 1;
7
+ transition: all 0.4s ease-in-out;
8
+ &.hidden_content {
9
+ opacity: 0;
10
+ // animation-name: illusion_content !important;
11
+ // animation-duration: 300ms !important;
12
+ // animation-timing-function: ease-out !important;
13
+ }
14
+ }
15
+ }
@@ -0,0 +1,115 @@
1
+ // modal.scss
2
+ // Extended from Bootstrap
3
+ //
4
+
5
+ //
6
+ // Bootstrap Overrides =======================
7
+ //
8
+ [class*='modal fade fixed-'] {
9
+ .modal-body {
10
+ position: relative;
11
+ flex: 1 1 auto;
12
+ padding: 2rem 1rem 1rem;
13
+ height: 120vh !important;
14
+ }
15
+ }
16
+
17
+ .modal-dialog {
18
+ // When fading in the modal, animate it to slide down
19
+ .modal.fade & {
20
+ transform: translate(0, -150px);
21
+ }
22
+
23
+ .modal.show & {
24
+ transform: translate(0, 0);
25
+ }
26
+ }
27
+
28
+ .modal-header .close {
29
+ margin: -1.5rem -1.5rem -1.5rem auto;
30
+ }
31
+
32
+ //
33
+ // Dashkit ===================================
34
+ //
35
+
36
+ // Modal dialog vertical
37
+ //
38
+ // Creates a vertically aligned version of the modal dialog
39
+
40
+ .modal-dialog-vertical {
41
+ height: 100%;
42
+ max-width: $modal-dialog-vertical-width;
43
+ margin: 0;
44
+ &.large {
45
+ max-width: $modal-dialog-vertical-width-md !important;
46
+ }
47
+
48
+ .modal-content {
49
+ height: inherit;
50
+ border-width: 0 $modal-content-border-width 0 0;
51
+ border-radius: 0;
52
+ border: 0px !important;
53
+ }
54
+
55
+ .modal-header {
56
+ border-radius: inherit;
57
+ }
58
+
59
+ .modal-body {
60
+ height: inherit;
61
+ overflow-y: auto;
62
+ }
63
+
64
+ &.xs {
65
+ max-width: $modal-dialog-vertical-width-xs;
66
+ }
67
+
68
+ &.modal-convertion {
69
+ max-width: 100%;
70
+ }
71
+ }
72
+
73
+ .modal.fade .modal-dialog-vertical {
74
+ transform: translateX(-100%);
75
+ }
76
+
77
+ .modal.show .modal-dialog-vertical {
78
+ transform: translateX(0);
79
+ }
80
+
81
+ // Positioning
82
+
83
+ .modal.fixed-right {
84
+ padding-right: 0 !important;
85
+ }
86
+
87
+ .modal.fixed-right .modal-dialog-vertical {
88
+ margin-left: auto;
89
+ }
90
+
91
+ .modal.fixed-right.fade .modal-dialog-vertical {
92
+ transform: translateX(100%);
93
+ }
94
+
95
+ .modal.fixed-right.show .modal-dialog-vertical {
96
+ transform: translateX(0);
97
+ }
98
+
99
+ // Modal card
100
+
101
+ .modal-card {
102
+ margin-bottom: 0;
103
+
104
+ .card-body {
105
+ max-height: $modal-card-body-max-height;
106
+ overflow-y: auto;
107
+ }
108
+ }
109
+
110
+ // Modal tabs
111
+
112
+ .modal-header-tabs {
113
+ margin-top: -$modal-header-padding-y;
114
+ margin-bottom: calc(-#{$modal-header-padding-y} - #{$border-width});
115
+ }